FieldSelect() — ui Function Reference

Architecture documentation for the FieldSelect() function in field-select.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ FieldSelect() — ui Function Reference

Dependency Diagram

graph TD
  1f192a68_bf19_40da_6ada_2b0be363bfb1["FieldSelect()"]
  b9b1267e_e471_f4ee_0b14_2f608238e9bf["field-select.tsx"]
  1f192a68_bf19_40da_6ada_2b0be363bfb1 -->|defined in| b9b1267e_e471_f4ee_0b14_2f608238e9bf
  style 1f192a68_bf19_40da_6ada_2b0be363bfb1 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/new-york-v4/examples/field-select.tsx lines 14–40

export default function FieldSelect() {
  return (
    <div className="w-full max-w-md">
      <Field>
        <FieldLabel>Department</FieldLabel>
        <Select>
          <SelectTrigger>
            <SelectValue placeholder="Choose department" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="engineering">Engineering</SelectItem>
            <SelectItem value="design">Design</SelectItem>
            <SelectItem value="marketing">Marketing</SelectItem>
            <SelectItem value="sales">Sales</SelectItem>
            <SelectItem value="support">Customer Support</SelectItem>
            <SelectItem value="hr">Human Resources</SelectItem>
            <SelectItem value="finance">Finance</SelectItem>
            <SelectItem value="operations">Operations</SelectItem>
          </SelectContent>
        </Select>
        <FieldDescription>
          Select your department or area of work.
        </FieldDescription>
      </Field>
    </div>
  )
}