Components
Select
Dropdown selection component with search, groups, and custom rendering.
Select
A dropdown selection component for choosing from a list of options.
Import
import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue, SelectGroup, SelectLabel } from '@mks2508/mks-ui/react';Basic Usage
Basic Usage
.tsx
<Select>
<SelectTrigger className="w-48">
<SelectValue placeholder="Select a fruit" />
</SelectTrigger>
<SelectContent>
<SelectItem value="apple">Apple</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="cherry">Cherry</SelectItem>
</SelectContent>
</Select>With Groups
With Groups
.tsx
<Select>
<SelectTrigger className="w-48">
<SelectValue placeholder="Select a food" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>Fruits</SelectLabel>
<SelectItem value="apple">Apple</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
</SelectGroup>
<SelectGroup>
<SelectLabel>Vegetables</SelectLabel>
<SelectItem value="carrot">Carrot</SelectItem>
<SelectItem value="potato">Potato</SelectItem>
</SelectGroup>
</SelectContent>
</Select>Controlled
const [value, setValue] = useState('');
<Select value={value} onValueChange={setValue}>
<SelectTrigger className="w-48">
<SelectValue placeholder="Choose..." />
</SelectTrigger>
<SelectContent>
<SelectItem value="sm">Small</SelectItem>
<SelectItem value="md">Medium</SelectItem>
<SelectItem value="lg">Large</SelectItem>
</SelectContent>
</Select>API Reference
| Component | Key Props | Description |
|---|---|---|
Select | value, onValueChange, defaultValue | Root provider |
SelectTrigger | className | Trigger button |
SelectValue | placeholder | Display selected value |
SelectContent | position | Dropdown panel |
SelectItem | value, disabled | Individual option |
SelectGroup | — | Option group wrapper |
SelectLabel | — | Group label text |