FormSelectDemo() — ui Function Reference

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

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ FormSelectDemo() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

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

export function FormSelectDemo() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Select Fields</CardTitle>
        <CardDescription>Different select field configurations</CardDescription>
      </CardHeader>
      <CardContent>
        <FieldGroup>
          <Field>
            <FieldLabel htmlFor="select-4c6-basic-ttc">Basic Select</FieldLabel>
            <Select>
              <SelectTrigger id="select-4c6-basic-ttc">
                <SelectValue placeholder="Choose an option" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="option1">Option 1</SelectItem>
                <SelectItem value="option2">Option 2</SelectItem>
                <SelectItem value="option3">Option 3</SelectItem>
              </SelectContent>
            </Select>
          </Field>
          <Field>
            <FieldLabel htmlFor="select-4c6-country-dc2">Country</FieldLabel>
            <Select>
              <SelectTrigger id="select-4c6-country-dc2">
                <SelectValue placeholder="Select your country" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="us">United States</SelectItem>
                <SelectItem value="uk">United Kingdom</SelectItem>
                <SelectItem value="ca">Canada</SelectItem>
              </SelectContent>
            </Select>
            <FieldDescription>
              Select the country where you currently reside.
            </FieldDescription>
          </Field>
          <Field>
            <FieldLabel htmlFor="select-4c6-timezone-es6">Timezone</FieldLabel>
            <FieldDescription>
              Choose your local timezone for accurate scheduling.
            </FieldDescription>
            <Select>
              <SelectTrigger id="select-4c6-timezone-es6">
                <SelectValue placeholder="Select timezone" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="utc">UTC</SelectItem>
                <SelectItem value="est">Eastern Time</SelectItem>
                <SelectItem value="pst">Pacific Time</SelectItem>
              </SelectContent>
            </Select>
          </Field>
        </FieldGroup>
      </CardContent>
    </Card>
  )
}