SelectLargeList() — ui Function Reference

Architecture documentation for the SelectLargeList() function in select-example.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ SelectLargeList() — ui Function Reference

Dependency Diagram

graph TD
  171c359a_75ef_bf5a_ca58_b1e8cc501c88["SelectLargeList()"]
  da287030_2184_07ad_21e7_133141a5c3fa["select-example.tsx"]
  171c359a_75ef_bf5a_ca58_b1e8cc501c88 -->|defined in| da287030_2184_07ad_21e7_133141a5c3fa
  style 171c359a_75ef_bf5a_ca58_b1e8cc501c88 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/select-example.tsx lines 281–307

function SelectLargeList() {
  const items = [
    { label: "Select an item", value: null },
    ...Array.from({ length: 100 }).map((_, i) => ({
      label: `Item ${i}`,
      value: `item-${i}`,
    })),
  ]
  return (
    <Example title="Large List">
      <Select items={items}>
        <SelectTrigger>
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            {items.map((item) => (
              <SelectItem key={item.value} value={item.value}>
                {item.label}
              </SelectItem>
            ))}
          </SelectGroup>
        </SelectContent>
      </Select>
    </Example>
  )
}