Select

Single-select dropdown. The trigger matches Input chrome; option hover and selected states use a light brand wash, not a solid yellow block.

Demos

Basic

Bind value and listen for change with e.detail.value. Options are slotted gk-option children.

ApplePearPlum

Value: pear

<gk-select :value="fruit" placeholder="Pick a fruit" @change="onFruit">
  <gk-option value="apple">Apple</gk-option>
  <gk-option value="pear">Pear</gk-option>
  <gk-option value="plum">Plum</gk-option>
</gk-select>

Custom loading and empty content

Provide elements with slot="loading" or slot="empty" to customize the corresponding listbox state.

Fetching fruits...No matching fruit

<gk-select loading open>
  <span slot="loading">Fetching fruits...</span>
  <span slot="empty">No matching fruit</span>
</gk-select>

Loading and remote search

loading shows a loading state and blocks selection. remote emits a debounced search event with e.detail.query and a monotonically increasing e.detail.requestId. Keep the latest request id to ignore stale async responses.

ApplePearPlum

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

Size

Heights match Input: 28 / 34 / 40 for sm / md / lg.

SmallMediumLarge

<gk-select size="sm" value="a" placeholder="Small">
  <gk-option value="a">Small</gk-option>
</gk-select>
<gk-select size="md" value="a" placeholder="Medium">
  <gk-option value="a">Medium</gk-option>
</gk-select>
<gk-select size="lg" value="a" placeholder="Large">
  <gk-option value="a">Large</gk-option>
</gk-select>

Virtual scrolling

Enable virtual for large option lists. Set item-height to the rendered option height in pixels.

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

<gk-select virtual item-height="34" placeholder="Many options">
  <!-- render a large list of gk-option elements here -->
</gk-select>

Clearable

clearable shows a clear control when a value is set.

ApplePear

<gk-select clearable :value="clearable" placeholder="Clearable" @change="onClearable">
  <gk-option value="apple">Apple</gk-option>
  <gk-option value="pear">Pear</gk-option>
</gk-select>

Status

Validation chrome via status: success, warning, or error.

Looks goodCheck thisInvalid

<gk-select status="success" value="ok" placeholder="Success">
  <gk-option value="ok">Looks good</gk-option>
</gk-select>
<gk-select status="warning" value="warn" placeholder="Warning">
  <gk-option value="warn">Check this</gk-option>
</gk-select>
<gk-select status="error" value="bad" placeholder="Error">
  <gk-option value="bad">Invalid</gk-option>
</gk-select>

Disabled

disabled blocks opening.

Apple

<gk-select disabled value="apple" placeholder="Disabled">
  <gk-option value="apple">Apple</gk-option>
</gk-select>

Filterable

filterable adds a search field and filters by option label or value.

ApplePearPlum

<gk-select filterable placeholder="Search fruit">
  <gk-option value="apple">Apple</gk-option>
  <gk-option value="pear">Pear</gk-option>
  <gk-option value="plum">Plum</gk-option>
</gk-select>

Multiple

multiple keeps the menu open and renders selected values as tags. Bind value as a string array. Options display checkbox indicators while multiple selection is enabled.

ApplePearPlum

Selected: apple, pear

<gk-select multiple :value="multipleValues" placeholder="Pick fruits" @change="onMultiple">
  <gk-option value="apple">Apple</gk-option>
  <gk-option value="pear">Pear</gk-option>
  <gk-option value="plum">Plum</gk-option>
</gk-select>

Maximum multiple selections

Set max to limit additions in multiple mode. Removing an already selected option remains available.

ApplePearPlum

<gk-select multiple max="2" placeholder="Pick up to two fruits">
  <gk-option value="apple">Apple</gk-option>
  <gk-option value="pear">Pear</gk-option>
  <gk-option value="plum">Plum</gk-option>
</gk-select>

Option groups and empty state

Use <gk-option-group label="…"> to visually group options. Disabled options are skipped by Arrow/Home/End keyboard navigation. An empty Select displays a No options status in the listbox.

Set filterable to show a search field while the listbox is open. Filtering matches option labels or values case-insensitively; Arrow keys and Enter continue to select from the filtered results.

Option groups

Group options with gk-option-group. A disabled group disables all its options.

ApplePearPlum

<gk-select placeholder="Pick a fruit">
  <gk-option-group label="Fresh">
    <gk-option value="apple">Apple</gk-option>
    <gk-option value="pear">Pear</gk-option>
  </gk-option-group>
  <gk-option-group label="Unavailable" disabled>
    <gk-option value="plum">Plum</gk-option>
  </gk-option-group>
</gk-select>

Empty state

An open Select with no options shows the empty listbox state.

<gk-select open placeholder="No options"></gk-select>

API

Select Props

Prop	Type	Default
value	string | string[]	'' / [] when 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

State content can be customized with the loading and empty named slots. Use name to include the value in a native form submission and required to enable constraint validation. Calling form.reset() clears the Select value. | multiple | boolean | false | | max | number | 0 (unlimited) | | status | 'success' \| 'warning' \| 'error' \| '' | '' | | open | boolean | false |

Select Slots

Name	Description
default	<gk-option value="…"> children
loading	Content shown while loading is true
empty	Content shown when no options are visible

Select Events

Name	Description
change	detail: { value: string | string[] }
search	detail: { query: string, requestId: number } after the remote debounce delay

Option Props

Prop	Type	Default
value	string	''
disabled	boolean	false

Option Group Props

Prop	Type	Default
label	string	''
disabled	boolean	false