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 ChartRegistry 3 imports 6 functions

Entity Profile

Dependency Diagram

graph LR
  761d5fb0_9c3f_c0ff_6224_2d72c71430c2["textarea-example.tsx"]
  da02b53a_0c1d_d1a1_af31_74d99f1cdd7a["example"]
  761d5fb0_9c3f_c0ff_6224_2d72c71430c2 --> da02b53a_0c1d_d1a1_af31_74d99f1cdd7a
  e2659e08_4bcd_4a08_ab57_ce3a18c3b284["field"]
  761d5fb0_9c3f_c0ff_6224_2d72c71430c2 --> e2659e08_4bcd_4a08_ab57_ce3a18c3b284
  00ef2588_30dc_d13b_692f_0ddd7c373f64["textarea"]
  761d5fb0_9c3f_c0ff_6224_2d72c71430c2 --> 00ef2588_30dc_d13b_692f_0ddd7c373f64
  style 761d5fb0_9c3f_c0ff_6224_2d72c71430c2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import {
  Example,
  ExampleWrapper,
} from "@/registry/bases/radix/components/example"
import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/registry/bases/radix/ui/field"
import { Textarea } from "@/registry/bases/radix/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, ChartRegistry 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/radix/examples/textarea-example.tsx (domain: ComponentRegistry, subdomain: ChartRegistry, directory: apps/v4/registry/bases/radix/examples).

Analyze Your Own Codebase

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

Try Supermodel Free