FormTextareaDemo() — ui Function Reference

Architecture documentation for the FormTextareaDemo() function in field-demo.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ FormTextareaDemo() — ui Function Reference

Dependency Diagram

graph TD
  7b826a17_58ba_fd63_cf8b_4a7acee4d899["FormTextareaDemo()"]
  b9b36d9d_9701_6134_d4ee_41213e7f1788["field-demo.tsx"]
  7b826a17_58ba_fd63_cf8b_4a7acee4d899 -->|defined in| b9b36d9d_9701_6134_d4ee_41213e7f1788
  style 7b826a17_58ba_fd63_cf8b_4a7acee4d899 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/components/field-demo.tsx lines 2028–2074

export function FormTextareaDemo() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Textarea Fields</CardTitle>
        <CardDescription>
          Different textarea field configurations
        </CardDescription>
      </CardHeader>
      <CardContent>
        <FieldGroup>
          <Field>
            <FieldLabel htmlFor="textarea-3b5-basic-cag">
              Basic Textarea
            </FieldLabel>
            <Textarea
              id="textarea-3b5-basic-cag"
              placeholder="Enter your message"
            />
          </Field>
          <Field>
            <FieldLabel htmlFor="textarea-3b5-comments-16o">
              Comments
            </FieldLabel>
            <Textarea
              id="textarea-3b5-comments-16o"
              placeholder="Share your thoughts..."
              className="min-h-[100px]"
            />
            <FieldDescription>Maximum 500 characters allowed.</FieldDescription>
          </Field>
          <Field>
            <FieldLabel htmlFor="textarea-3b5-bio">Bio</FieldLabel>
            <FieldDescription>
              Tell us about yourself in a few sentences.
            </FieldDescription>
            <Textarea
              id="textarea-3b5-bio"
              placeholder="I am a..."
              className="min-h-[120px]"
            />
          </Field>
        </FieldGroup>
      </CardContent>
    </Card>
  )
}