GkSelect

Native <select> backed by an options array. This stays close to the platform—no menu, virtual list, or combobox (those belong in app code or a future headless primitive).

When to use

Use for native single or multi-select controls where platform keyboard behavior is preferred over a custom combobox UI.

Live Examples

Single select

Options array and placeholder inside GkField.

Single

Choose…AlphaBetaGamma

vue

<script setup lang="ts">
import { GkField, GkSelect } from 'god-kit/vue'
import { ref } from 'vue'

const value = ref<string | undefined>('b')

const options = [
  { value: 'a', label: 'Alpha' },
  { value: 'b', label: 'Beta' },
  { value: 'c', label: 'Gamma' },
]
</script>

<template>
  <GkField label="Single">
    <GkSelect
      v-model="value"
      :options="options"
      aria-label="Pick an option"
      placeholder="Choose…"
    />
  </GkField>
</template>

Multiple

Array v-model and native size for visible rows.

Multiple

Add…AlphaBetaGamma

vue

<script setup lang="ts">
import { GkField, GkSelect } from 'god-kit/vue'
import { ref } from 'vue'

const multi = ref<string[]>(['a'])

const options = [
  { value: 'a', label: 'Alpha' },
  { value: 'b', label: 'Beta' },
  { value: 'c', label: 'Gamma' },
]
</script>

<template>
  <GkField label="Multiple">
    <GkSelect
      v-model="multi"
      :options="options"
      multiple
      :size="4"
      aria-label="Pick many"
      placeholder="Add…"
    />
  </GkField>
</template>

Readonly

Readonly select reverts changes and sets aria-readonly.

Readonly review

AlphaBetaGamma

vue

<script setup lang="ts">
import { GkField, GkSelect } from 'god-kit/vue'
import { ref } from 'vue'

const review = ref<string | undefined>('a')

const options = [
  { value: 'a', label: 'Alpha' },
  { value: 'b', label: 'Beta' },
  { value: 'c', label: 'Gamma' },
]
</script>

<template>
  <GkField label="Readonly review">
    <GkSelect
      v-model="review"
      :options="options"
      readonly
      aria-label="Readonly review"
    />
  </GkField>
</template>

API

Props

Prop	Type	Default	Description
modelValue	string | number | (string | number)[] | undefined	—	Selected value; array when multiple is true
options	GkSelectOption[]	required	Options list
id	string	—	Overrides injected field id
name	string	—	Form name
disabled	boolean	false	Disabled
readonly	boolean	false	Reverts change and sets aria-readonly (native readonly is not reliable on <select>)
multiple	boolean	false	Native multiple; use an array modelValue
required	boolean	—	Native required
size	GkFormControlSize | number	—	String ('xs' … 'xl'): visual control scale. Number: native <select size="n"> (visible rows, often with multiple); visual size then comes from defaults / GK_FORM_CONTROLS.
placeholder	string	—	First disabled option (value="")
autocomplete	string	—	Native autocomplete
ariaLabel	string	—	When not inside GkField

Root class applies to the wrapper; other attributes are forwarded to <select>.

GkSelectOption: { value: string | number; label: string; disabled?: boolean }

Events

Event	Payload	Description
update:modelValue	string | number | (string | number)[] | undefined	New selection
update:focused	boolean	true on focus, false on blur

Expose

Name	Type	Description
select	HTMLSelectElement	Native <select>

Examples

Each scenario under Live Examples includes a copyable Vue snippet.

Accessibility notes

• Wrap with GkField for visible labels and error semantics in forms.
• Provide ariaLabel when used standalone.
• For multiple, pass a numeric size (native visible rows) when you need a listbox. For a single closed dropdown, use a string size (or global default) for typography and hit area only.

Related components

• GkInput
• GkField
• GkRadioGroup & GkRadio