NativeSelectDemo() — ui Function Reference

Architecture documentation for the NativeSelectDemo() function in native-select-demo.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ NativeSelectDemo() — ui Function Reference

Dependency Diagram

graph TD
  a72419f6_751a_25e4_7841_53c99258c66d["NativeSelectDemo()"]
  df5897d1_4912_ac7f_f099_6644db6cddfa["native-select-demo.tsx"]
  a72419f6_751a_25e4_7841_53c99258c66d -->|defined in| df5897d1_4912_ac7f_f099_6644db6cddfa
  style a72419f6_751a_25e4_7841_53c99258c66d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/components/native-select-demo.tsx lines 16–135

export function NativeSelectDemo() {
  return (
    <div className="flex flex-col gap-8">
      <div className="flex flex-col gap-3">
        <div className="text-muted-foreground text-sm font-medium">
          Basic Select
        </div>
        <div className="flex flex-col gap-4">
          <NativeSelect>
            <NativeSelectOption value="">Select a fruit</NativeSelectOption>
            <NativeSelectOption value="apple">Apple</NativeSelectOption>
            <NativeSelectOption value="banana">Banana</NativeSelectOption>
            <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
            <NativeSelectOption value="grapes" disabled>
              Grapes
            </NativeSelectOption>
            <NativeSelectOption value="pineapple">Pineapple</NativeSelectOption>
          </NativeSelect>
          <Select>
            <SelectTrigger>
              <SelectValue placeholder="Select a fruit" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="apple">Apple</SelectItem>
              <SelectItem value="banana">Banana</SelectItem>
              <SelectItem value="blueberry">Blueberry</SelectItem>
              <SelectItem value="grapes" disabled>
                Grapes
              </SelectItem>
              <SelectItem value="pineapple">Pineapple</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>
      <div className="flex flex-col gap-3">
        <div className="text-muted-foreground text-sm font-medium">
          With Groups
        </div>
        <div className="flex flex-col gap-4">
          <NativeSelect>
            <NativeSelectOption value="">Select a food</NativeSelectOption>
            <NativeSelectOptGroup label="Fruits">
              <NativeSelectOption value="apple">Apple</NativeSelectOption>
              <NativeSelectOption value="banana">Banana</NativeSelectOption>
              <NativeSelectOption value="blueberry">
                Blueberry
              </NativeSelectOption>
            </NativeSelectOptGroup>
            <NativeSelectOptGroup label="Vegetables">
              <NativeSelectOption value="carrot">Carrot</NativeSelectOption>
              <NativeSelectOption value="broccoli">Broccoli</NativeSelectOption>
              <NativeSelectOption value="spinach">Spinach</NativeSelectOption>
            </NativeSelectOptGroup>
          </NativeSelect>
          <Select>
            <SelectTrigger>
              <SelectValue placeholder="Select a food" />
            </SelectTrigger>
            <SelectContent>
              <SelectGroup>
                <SelectLabel>Fruits</SelectLabel>
                <SelectItem value="apple">Apple</SelectItem>
                <SelectItem value="banana">Banana</SelectItem>
                <SelectItem value="blueberry">Blueberry</SelectItem>
              </SelectGroup>
              <SelectGroup>
                <SelectLabel>Vegetables</SelectLabel>
                <SelectItem value="carrot">Carrot</SelectItem>
                <SelectItem value="broccoli">Broccoli</SelectItem>
                <SelectItem value="spinach">Spinach</SelectItem>
              </SelectGroup>
            </SelectContent>
          </Select>
        </div>
      </div>
      <div className="flex flex-col gap-3">
        <div className="text-muted-foreground text-sm font-medium">
          Disabled State
        </div>
        <div className="flex flex-col gap-4">
          <NativeSelect disabled>