SelectDemo() — ui Function Reference

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

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ SelectDemo() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/components/select-demo.tsx lines 19–93

export function SelectDemo() {
  return (
    <div className="flex flex-wrap items-start gap-4">
      <Select>
        <SelectTrigger className="w-[180px]">
          <SelectValue placeholder="Select a fruit" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectLabel>Fruits</SelectLabel>
            <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>
          </SelectGroup>
        </SelectContent>
      </Select>
      <Select>
        <SelectTrigger className="w-[180px]">
          <SelectValue placeholder="Large List" />
        </SelectTrigger>
        <SelectContent>
          {Array.from({ length: 100 }).map((_, i) => (
            <SelectItem key={i} value={`item-${i}`}>
              Item {i}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
      <Select disabled>
        <SelectTrigger className="w-[180px]">
          <SelectValue placeholder="Disabled" />
        </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>
      <Select>
        <SelectTrigger className="w-[180px]">
          <SelectValue
            placeholder={
              <>
                <CircleDashed className="text-muted-foreground" />
                With Icon
              </>
            }
          />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="line">
            <ChartLineIcon />
            Line
          </SelectItem>
          <SelectItem value="bar">
            <ChartBarIcon />
            Bar
          </SelectItem>
          <SelectItem value="pie">
            <ChartPieIcon />
            Pie
          </SelectItem>
        </SelectContent>
      </Select>
    </div>
  )
}