Sections

Utilities

Forms

Hooks

useIsMobileNew

Select

Displays a list of options.

Installation


pnpm dlx shadcn@latest add @shark/select

Anatomy


Select
├── SelectTrigger
│   └── SelectValue
└── SelectContent
    ├── SelectEmpty
    ├── SelectClearTrigger
    ├── SelectGroup
    │   ├── SelectGroupLabel
    │   └── SelectItem
    └── SelectItem

Usage


import { createListCollection } from "@ark-ui/react";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";


const collection = createListCollection({
  items: ["Option 1", "Option 2", "Option 3"],
});
 
<Select collection={collection}>
  <SelectTrigger>
    <SelectValue placeholder="Select an option" />
  </SelectTrigger>
  <SelectContent>
    {collection.items.map((item) => (
      <SelectItem item={item} key={item}>
        {item}
      </SelectItem>
    ))}
  </SelectContent>
</Select>

Controlled

Use value and onValueChange to control the selected items.

Size

Control trigger size with the size prop on SelectTrigger.

Small

Medium

Large

States

Disabled

Invalid

Examples

Multiple

Enable multiple selection with the multiple prop.

Grouping

Organize options into groups using groupBy and SelectGroup.

With Field

Use Field for labels, helper text, and error handling.

Max Selection

With Scroll

Empty

Use SelectEmpty to display a message when the collection has no items.

API Reference

Select

Root component.

Prop	Type	Default
`collection`	`ListCollection<T>`	-
`value`	`string[]`	-
`defaultValue`	`string[]`	-
`onValueChange`	`(details: ValueChangeDetails<T>) => void`	-
`multiple`	`boolean`	`false`
`disabled`	`boolean`	-
`invalid`	`boolean`	-
`name`	`string`	-
`required`	`boolean`	-
`positioning`	`PositioningOptions`	-
`lazyMount`	`boolean`	`true`
`unmountOnExit`	`boolean`	`true`
`className`	`string`	-

SelectTrigger

Opens the dropdown on click. Displays the selected value or placeholder.

Prop	Type	Default
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`showClear`	`boolean`	`false`
`className`	`string`	-
`asChild`	`boolean`	-

SelectValue

Shows the selected value or placeholder. Use SelectContext as children for custom display.

Prop	Type	Default
`placeholder`	`string`	-
`className`	`string`	-
`asChild`	`boolean`	-

SelectContent

Holds the dropdown options. Displayed in a portal.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	-

SelectClearTrigger

Button to clear the selected value. Shown when showClear is true on SelectTrigger.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	-

SelectGroup

Groups related options under an optional heading.

Prop	Type	Default
`heading`	`string` \| `ReactNode`	-
`className`	`string`	-
`asChild`	`boolean`	-

SelectGroupLabel

Label for an option group.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	-

SelectItem

A single selectable option in the dropdown.

Prop	Type	Default
`item`	`T`	-
`className`	`string`	-
`asChild`	`boolean`	-

SelectEmpty

Shown when the collection has no items (collection.size === 0). Place inside SelectContent.

Prop	Type	Default
`className`	`string`	-

For a complete list of props, see the Ark UI documentation.

Segment Group

Separator