元件 (Components)
Select 選取
Skies.ui Select:Radix 下拉選單,鍵盤與螢幕閱讀器友善,與表單、主題對齊;API 與範例。
Select 選取
Select 由 Radix Select 組合而成:SelectTrigger + SelectValue 顯示目前選項,SelectContent 內放 SelectItem。樣式與 border-input、bg-card、focus:ring-ring 等語意一致。
基本用法
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@skies-ui/ui";
export function AirportSelect() {
return (
<Select defaultValue="tpe">
<SelectTrigger aria-label="選擇機場">
<SelectValue placeholder="選擇機場" />
</SelectTrigger>
<SelectContent>
<SelectItem value="tpe">台北 TPE</SelectItem>
<SelectItem value="khh">高雄 KHH</SelectItem>
<SelectItem value="rmq">台中 RMQ</SelectItem>
</SelectContent>
</Select>
);
}未包在表單裡、又沒有外層文字標籤時,請在 SelectTrigger 加上 aria-label(或 aria-labelledby)。
群組與分隔線
使用 SelectGroup、SelectLabel、SelectSeparator 整理長清單。
<Select defaultValue="react">
<SelectTrigger aria-label="選擇框架">
<SelectValue placeholder="選擇框架" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>前端</SelectLabel>
<SelectItem value="react">React</SelectItem>
<SelectItem value="vue">Vue</SelectItem>
</SelectGroup>
<SelectSeparator />
<SelectGroup>
<SelectLabel>後端</SelectLabel>
<SelectItem value="node">Node</SelectItem>
<SelectItem value="bun">Bun</SelectItem>
</SelectGroup>
</SelectContent>
</Select>停用選項
在 SelectItem 上使用 disabled。
受控與表單
- 非受控:
defaultValue搭配onValueChange。 - 受控:
value+onValueChange。 - 放在
<form>內時,在Select上設定name(Radix 會渲染隱藏欄位提交值)。
與 Button、Card 並用時,表單送出鈕請使用 type="submit" 的 Button。
API 摘要
| 元件 | 說明 |
|---|---|
Select | 根節點;value / defaultValue / onValueChange / name / disabled 等 |
SelectTrigger | 對應 Radix Trigger;內含圖示與 SelectValue |
SelectValue | 顯示選中文字;placeholder |
SelectContent | 浮層內容;可傳 position(預設 popper)、sideOffset 等 |
SelectItem | 單一選項;value、可選 disabled |
SelectGroup / SelectLabel / SelectSeparator | 分組與視覺分隔 |
SelectScrollUpButton / SelectScrollDownButton | 長清單捲動(已內建在 SelectContent 內) |
套件為 Client Component(檔案含 "use client"),請在 App Router 中由 Client 邊界或 MDX 使用。