FormInputDemo() — ui Function Reference

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

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ FormInputDemo() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

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

export function FormInputDemo() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Input Fields</CardTitle>
        <CardDescription>Different input field configurations</CardDescription>
      </CardHeader>
      <CardContent>
        <FieldGroup>
          <Field>
            <FieldLabel htmlFor="input-1a2-basic-ian">Basic Input</FieldLabel>
            <Input id="input-1a2-basic-ian" placeholder="Enter text" />
          </Field>
          <Field>
            <FieldLabel htmlFor="input-1a2-withDesc-k18">
              Input with Description
            </FieldLabel>
            <Input
              id="input-1a2-withDesc-k18"
              placeholder="Enter your username"
            />
            <FieldDescription>
              Choose a unique username for your account.
            </FieldDescription>
          </Field>
          <Field>
            <FieldLabel htmlFor="input-1a2-descFirst-omn">
              Email Address
            </FieldLabel>
            <FieldDescription>
              We&apos;ll never share your email with anyone.
            </FieldDescription>
            <Input
              id="input-1a2-descFirst-omn"
              type="email"
              placeholder="email@example.com"
            />
          </Field>
          <Field>
            <FieldLabel htmlFor="input-1a2-required-hao">
              Required Field <span className="text-destructive">*</span>
            </FieldLabel>
            <Input
              id="input-1a2-required-hao"
              placeholder="This field is required"
              required
            />
            <FieldDescription>This field must be filled out.</FieldDescription>
          </Field>
          <Field>
            <FieldLabel htmlFor="input-1a2-disabled-xb6">
              Disabled Input
            </FieldLabel>
            <Input
              id="input-1a2-disabled-xb6"
              placeholder="Cannot edit"
              disabled
            />
            <FieldDescription>
              This field is currently disabled.
            </FieldDescription>
          </Field>
        </FieldGroup>
      </CardContent>
    </Card>
  )
}