ui Architecture Docs
Home / File/ textarea-example.tsx — ui Source File

textarea-example.tsx — ui Source File

Architecture documentation for textarea-example.tsx, a tsx file in the ui codebase. 3 imports, 0 dependents.

File tsx ComponentRegistry UIPrimitives 3 imports 6 functions

Entity Profile

Dependency Diagram

graph LR
  12b5d642_1e1c_d997_c9ee_8ace432ded1d["textarea-example.tsx"]
  f56be340_a522_c6f7_dec3_5906873d14c8["example"]
  12b5d642_1e1c_d997_c9ee_8ace432ded1d --> f56be340_a522_c6f7_dec3_5906873d14c8
  8a527dea_9425_3da4_8ceb_ec3058568dc9["field"]
  12b5d642_1e1c_d997_c9ee_8ace432ded1d --> 8a527dea_9425_3da4_8ceb_ec3058568dc9
  b13d50f9_6ce4_55bb_cb91_b23db28c24ab["textarea"]
  12b5d642_1e1c_d997_c9ee_8ace432ded1d --> b13d50f9_6ce4_55bb_cb91_b23db28c24ab
  style 12b5d642_1e1c_d997_c9ee_8ace432ded1d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import {
  Example,
  ExampleWrapper,
} from "@/registry/bases/base/components/example"
import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/registry/bases/base/ui/field"
import { Textarea } from "@/registry/bases/base/ui/textarea"

export default function TextareaExample() {
  return (
    <ExampleWrapper>
      <TextareaBasic />
      <TextareaInvalid />
      <TextareaWithLabel />
      <TextareaWithDescription />
      <TextareaDisabled />
    </ExampleWrapper>
  )
}

function TextareaBasic() {
  return (
    <Example title="Basic">
      <Textarea placeholder="Type your message here." />
    </Example>
  )
}

function TextareaInvalid() {
  return (
    <Example title="Invalid">
      <Textarea placeholder="Type your message here." aria-invalid="true" />
    </Example>
  )
}

function TextareaWithLabel() {
  return (
    <Example title="With Label">
      <Field>
        <FieldLabel htmlFor="textarea-demo-message">Message</FieldLabel>
        <Textarea
          id="textarea-demo-message"
          placeholder="Type your message here."
          rows={6}
        />
      </Field>
    </Example>
  )
}

function TextareaWithDescription() {
  return (
    <Example title="With Description">
      <Field>
        <FieldLabel htmlFor="textarea-demo-message-2">Message</FieldLabel>
        <Textarea
          id="textarea-demo-message-2"
          placeholder="Type your message here."
          rows={6}
        />
        <FieldDescription>
          Type your message and press enter to send.
        </FieldDescription>
      </Field>
    </Example>
  )
}

function TextareaDisabled() {
  return (
    <Example title="Disabled">
      <Field>
        <FieldLabel htmlFor="textarea-demo-disabled">Message</FieldLabel>
        <Textarea
          id="textarea-demo-disabled"
          placeholder="Type your message here."
          disabled
        />
      </Field>
    </Example>
  )
}

Domain

Subdomains

Functions

Dependencies

  • example
  • field
  • textarea

Source

Frequently Asked Questions

What does textarea-example.tsx do?
textarea-example.tsx is a source file in the ui codebase, written in tsx. It belongs to the ComponentRegistry domain, UIPrimitives subdomain.
What functions are defined in textarea-example.tsx?
textarea-example.tsx defines 6 function(s): TextareaBasic, TextareaDisabled, TextareaExample, TextareaInvalid, TextareaWithDescription, TextareaWithLabel.
What does textarea-example.tsx depend on?
textarea-example.tsx imports 3 module(s): example, field, textarea.
Where is textarea-example.tsx in the architecture?
textarea-example.tsx is located at apps/v4/registry/bases/base/examples/textarea-example.tsx (domain: ComponentRegistry, subdomain: UIPrimitives, directory: apps/v4/registry/bases/base/examples).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free