Use Select to pick one value from a styled dropdown.
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@tile-ui/react';
export default function SelectDemo() {
return (
<Select defaultValue="apple">
<SelectTrigger aria-label="Fruit" style={{ width: 220 }}>
Registry install
pnpm dlx shadcn@latest add @tile-ui/select
Package usage
import { Select, SelectTrigger, SelectContent, SelectItem } from '@tile-ui/react';
<Select>
<SelectTrigger>Choose a fruit</SelectTrigger>
<SelectContent>
<SelectItem value="apple">Apple</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
</SelectContent>
</Select>
Highlights
- Trigger, content, and item
- Group, label, and separator
- Controlled and uncontrolled
Registry dependencies
| Item | Purpose |
|---|
select | Component source and module styles |
core | Framework-agnostic logic helpers |
styles | Shared SCSS tokens and globals |
API reference
Select
| Prop | Type | Default |
|---|
open | boolean | — |
defaultOpen | boolean | — |
onOpenChange | (open: boolean) => void | — |
value | string | — |
defaultValue | string | — |
onValueChange | (value: string) => void | — |
SelectTrigger
| Prop | Type | Default |
|---|
size | 'sm' | 'default' | — |
SelectContent
| Prop | Type | Default |
|---|
position | 'item-aligned' | 'popper' | — |
align | 'start' | 'center' | 'end' | — |
sideOffset | number | — |
SelectItem
| Prop | Type | Default |
|---|
value | string | — |
disabled | boolean | — |