Select

A dropdown select control built on Ark UI with collection-based items.

Import


import { Select, createListCollection } from '@grannyshot/ui'

Usage


const collection = createListCollection({
  items: [
    { label: 'React', value: 'react' },
    { label: 'Vue', value: 'vue' },
    { label: 'Svelte', value: 'svelte' },
  ],
})
 
<Select collection={collection} placeholder="Select a framework" />

Sizes


<Select collection={collection} size="sm" placeholder="Small" />
<Select collection={collection} size="md" placeholder="Medium" />
<Select collection={collection} size="lg" placeholder="Large" />

Disabled


<Select collection={collection} placeholder="Disabled" disabled />

Props

Prop	Type	Default	Description
`collection`	`ListCollection`	—	Collection of selectable items
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Select size
`placeholder`	`string`	—	Placeholder text
`disabled`	`boolean`	`false`	Disabled state
`className`	`string`	—	Additional CSS classes

createListCollection

Creates a collection from an array of items.


const collection = createListCollection({
  items: [
    { label: 'Option 1', value: 'option-1' },
    { label: 'Option 2', value: 'option-2' },
  ],
})