Select 選擇器

單選下拉選單。觸發器對齊 Input 外觀；選項懸停與選中使用淺品牌色，不是實心黃塊。

示範

基礎

綁定 value，並以 e.detail.value 監聽 change。選項以 gk-option 插槽提供。

蘋果梨李

值：pear

<gk-select :value="fruit" placeholder="選擇水果" @change="onFruit">
  <gk-option value="apple">蘋果</gk-option>
  <gk-option value="pear">梨</gk-option>
  <gk-option value="plum">李</gk-option>
</gk-select>

自訂載入與空狀態內容

使用 slot="loading" 或 slot="empty" 的元素， 自訂清單的載入與空狀態內容。

正在取得水果…找不到符合的水果

<gk-select loading open>
  <span slot="loading">正在取得水果…</span>
  <span slot="empty">找不到符合的水果</span>
</gk-select>

載入與遠端搜尋

loading 顯示載入狀態並阻擋選取；remote 會在 debounce 後以 e.detail.query 與遞增的 e.detail.requestId 派發 search。請保留最新 request id 以忽略過期的非同步回應； 可用 remote-debounce 設定毫秒數。

蘋果梨李

<gk-select remote remote-debounce="300" :loading="remoteLoading" placeholder="遠端搜尋" @search="onRemoteSearch">
  <gk-option v-for="option in remoteOptions" :key="option.value" :value="option.value">{{ option.label }}</gk-option>
</gk-select>

篩選

filterable 會加入搜尋欄位，並依選項文字或 value 篩選。

蘋果梨李

<gk-select filterable placeholder="搜尋水果">
  <gk-option value="apple">蘋果</gk-option>
  <gk-option value="pear">梨</gk-option>
  <gk-option value="plum">李</gk-option>
</gk-select>

多選

multiple 會保持清單開啟，並將已選值顯示為標籤。value 請使用字串陣列； 選項也會顯示 checkbox 選取指示。

蘋果梨李

已選：apple、pear

<gk-select multiple :value="multipleValues" placeholder="選擇水果" @change="onMultiple">
  <gk-option value="apple">蘋果</gk-option>
  <gk-option value="pear">梨</gk-option>
  <gk-option value="plum">李</gk-option>
</gk-select>

多選數量上限

在多選模式設定 max 限制新增數量；已選項目仍可正常取消。

蘋果梨李

<gk-select multiple max="2" placeholder="最多選兩種水果">
  <gk-option value="apple">蘋果</gk-option>
  <gk-option value="pear">梨</gk-option>
  <gk-option value="plum">李</gk-option>
</gk-select>

選項群組與空狀態

可使用 <gk-option-group label="…"> 將選項分組。鍵盤以 Arrow/Home/End 導覽時會跳過停用選項；沒有選項時，清單會顯示 No options 狀態。

設定 filterable 後，清單開啟時會顯示搜尋欄位。篩選會不分大小寫比對選項文字或 value；Arrow 鍵與 Enter 仍可從篩選結果中導覽與選取。

選項群組

使用 gk-option-group 將選項分組；停用群組會停用其中所有選項。

蘋果梨李

<gk-select placeholder="選擇水果">
  <gk-option-group label="新鮮水果">
    <gk-option value="apple">蘋果</gk-option>
    <gk-option value="pear">梨</gk-option>
  </gk-option-group>
  <gk-option-group label="無法使用" disabled>
    <gk-option value="plum">李</gk-option>
  </gk-option-group>
</gk-select>

空狀態

開啟但沒有選項的 Select 會顯示空清單狀態。

<gk-select open placeholder="沒有選項"></gk-select>

尺寸

高度對齊 Input：sm / md / lg 為 28 / 34 / 40。

小中大

<gk-select size="sm" value="a" placeholder="小">
  <gk-option value="a">小</gk-option>
</gk-select>
<gk-select size="md" value="a" placeholder="中">
  <gk-option value="a">中</gk-option>
</gk-select>
<gk-select size="lg" value="a" placeholder="大">
  <gk-option value="a">大</gk-option>
</gk-select>

虛擬滾動

大量選項可啟用 virtual。item-height 請設定為實際選項高度（像素）。

選項 1 選項 2 選項 3 選項 4 選項 5 選項 6 選項 7 選項 8 選項 9 選項 10 選項 11 選項 12 選項 13 選項 14 選項 15 選項 16 選項 17 選項 18 選項 19 選項 20 選項 21 選項 22 選項 23 選項 24 選項 25 選項 26 選項 27 選項 28 選項 29 選項 30 選項 31 選項 32 選項 33 選項 34 選項 35 選項 36 選項 37 選項 38 選項 39 選項 40 選項 41 選項 42 選項 43 選項 44 選項 45 選項 46 選項 47 選項 48 選項 49 選項 50 選項 51 選項 52 選項 53 選項 54 選項 55 選項 56 選項 57 選項 58 選項 59 選項 60 選項 61 選項 62 選項 63 選項 64 選項 65 選項 66 選項 67 選項 68 選項 69 選項 70 選項 71 選項 72 選項 73 選項 74 選項 75 選項 76 選項 77 選項 78 選項 79 選項 80 選項 81 選項 82 選項 83 選項 84 選項 85 選項 86 選項 87 選項 88 選項 89 選項 90 選項 91 選項 92 選項 93 選項 94 選項 95 選項 96 選項 97 選項 98 選項 99 選項 100

<gk-select virtual item-height="34" placeholder="大量選項">
  <!-- 在此提供大量 gk-option 元素 -->
</gk-select>

可清除

clearable 在有值時顯示清除按鈕。

蘋果梨

<gk-select clearable :value="clearable" placeholder="可清除" @change="onClearable">
  <gk-option value="apple">蘋果</gk-option>
  <gk-option value="pear">梨</gk-option>
</gk-select>

狀態

以 status 顯示驗證外觀：success、warning 或 error。

看起來沒問題請檢查無效

<gk-select status="success" value="ok" placeholder="成功">
  <gk-option value="ok">看起來沒問題</gk-option>
</gk-select>
<gk-select status="warning" value="warn" placeholder="警告">
  <gk-option value="warn">請檢查</gk-option>
</gk-select>
<gk-select status="error" value="bad" placeholder="錯誤">
  <gk-option value="bad">無效</gk-option>
</gk-select>

停用

disabled 會阻擋開啟。

蘋果

<gk-select disabled value="apple" placeholder="停用">
  <gk-option value="apple">蘋果</gk-option>
</gk-select>

API

Select Props

Prop	型別	預設值
value	string | string[]	''／multiple 時為 []
placeholder	string	''
size	'sm' | 'md' | 'lg'	'md'
disabled	boolean	false
clearable	boolean	false
filterable	boolean	false
loading	boolean	false
remote	boolean	false
remote-debounce	number	300
virtual	boolean	false
item-height	number	34
name	string	''
required	boolean	false

可使用 loading 與 empty 命名 slot 自訂狀態內容。 設定 name 可讓 Select 參與原生表單提交；required 會啟用約束驗證。 呼叫 form.reset() 會清除 Select 值。 | multiple | boolean | false | | max | number | 0（不限） | | status | 'success' \| 'warning' \| 'error' \| '' | '' | | open | boolean | false |

Select Slots

名稱	說明
default	<gk-option value="…"> 子元素
loading	loading 為 true 時顯示的內容
empty	沒有可見選項時顯示的內容

Select Events

名稱	說明
change	detail: { value: string | string[] }
search	detail: { query: string, requestId: number }（remote debounce 後）

Option Props

Prop	型別	預設值
value	string	''
disabled	boolean	false

Option Group Props

Prop	型別	預設值
label	string	''
disabled	boolean	false