Select
Preview
Source code
html
<h-select
label="Color"
:options="selectOptions"
v-model="selected"
:kind="state.kind"
/>
<h-icon-button label="Clear" @click="selected = null">
<close-circle />
</h-icon-button><h-select
label="Color"
:options="selectOptions"
v-model="selected"
:kind="state.kind"
/>
<h-icon-button label="Clear" @click="selected = null">
<close-circle />
</h-icon-button>A Select component helps users choose between a set of choices. There is no current official documentation for this component, but the guidelines for menus and the guidelines for text fields have pertinent information.
Props
ts
interface Option {
// The text to be displayed in the select.
label: string
// The value that this option represents.
value: T
// Whether this option is disabled.
disabled?: boolean
}
const props = defineProps<{
// The label for the overall select.
label: string
// The current value, if any.
// This can be bound with v-model.
modelValue: T | null
// The options to display.
options: Option[]
// Whether this is scrollable or not.
scrollable?: boolean
// What kind of select to render.
kind?: 'outlined' | 'filled'
// Whether the select as a whole is disabled or not.
disabled?: boolean
}>()interface Option {
// The text to be displayed in the select.
label: string
// The value that this option represents.
value: T
// Whether this option is disabled.
disabled?: boolean
}
const props = defineProps<{
// The label for the overall select.
label: string
// The current value, if any.
// This can be bound with v-model.
modelValue: T | null
// The options to display.
options: Option[]
// Whether this is scrollable or not.
scrollable?: boolean
// What kind of select to render.
kind?: 'outlined' | 'filled'
// Whether the select as a whole is disabled or not.
disabled?: boolean
}>()