SelectFields() — ui Function Reference

Architecture documentation for the SelectFields() function in field-example.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ SelectFields() — ui Function Reference

Dependency Diagram

graph TD
  156617b4_8f7d_90d1_da6c_0498f2caaaab["SelectFields()"]
  0c6bcf2e_fcfc_3202_c84d_ba133cbc5e3f["field-example.tsx"]
  156617b4_8f7d_90d1_da6c_0498f2caaaab -->|defined in| 0c6bcf2e_fcfc_3202_c84d_ba133cbc5e3f
  style 156617b4_8f7d_90d1_da6c_0498f2caaaab fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/field-example.tsx lines 203–297

function SelectFields() {
  return (
    <Example title="Select Fields">
      <FieldGroup>
        <Field>
          <FieldLabel htmlFor="select-basic">Basic Select</FieldLabel>
          <Select>
            <SelectTrigger id="select-basic">
              <SelectValue placeholder="Choose an option" />
            </SelectTrigger>
            <SelectContent>
              <SelectGroup>
                <SelectItem value="option1">Option 1</SelectItem>
                <SelectItem value="option2">Option 2</SelectItem>
                <SelectItem value="option3">Option 3</SelectItem>
              </SelectGroup>
            </SelectContent>
          </Select>
        </Field>
        <Field>
          <FieldLabel htmlFor="select-country">Country</FieldLabel>
          <Select>
            <SelectTrigger id="select-country">
              <SelectValue placeholder="Select your country" />
            </SelectTrigger>
            <SelectContent>
              <SelectGroup>
                <SelectItem value="us">United States</SelectItem>
                <SelectItem value="uk">United Kingdom</SelectItem>
                <SelectItem value="ca">Canada</SelectItem>
              </SelectGroup>
            </SelectContent>
          </Select>
          <FieldDescription>
            Select the country where you currently reside.
          </FieldDescription>
        </Field>
        <Field>
          <FieldLabel htmlFor="select-timezone">Timezone</FieldLabel>
          <FieldDescription>
            Choose your local timezone for accurate scheduling.
          </FieldDescription>
          <Select>
            <SelectTrigger id="select-timezone">
              <SelectValue placeholder="Select timezone" />
            </SelectTrigger>
            <SelectContent>
              <SelectGroup>
                <SelectItem value="utc">UTC</SelectItem>
                <SelectItem value="est">Eastern Time</SelectItem>
                <SelectItem value="pst">Pacific Time</SelectItem>
              </SelectGroup>
            </SelectContent>
          </Select>
        </Field>
        <Field data-invalid>
          <FieldLabel htmlFor="select-invalid">Invalid Select</FieldLabel>
          <Select>
            <SelectTrigger id="select-invalid" aria-invalid>
              <SelectValue placeholder="This field has an error" />
            </SelectTrigger>
            <SelectContent>
              <SelectGroup>
                <SelectItem value="option1">Option 1</SelectItem>
                <SelectItem value="option2">Option 2</SelectItem>
                <SelectItem value="option3">Option 3</SelectItem>
              </SelectGroup>
            </SelectContent>
          </Select>
          <FieldDescription>
            This field contains validation errors.
          </FieldDescription>
        </Field>
        <Field data-disabled>
          <FieldLabel htmlFor="select-disabled-field">
            Disabled Field
          </FieldLabel>
          <Select disabled>
            <SelectTrigger id="select-disabled-field">
              <SelectValue placeholder="Cannot select" />
            </SelectTrigger>