Vitral 0.2
Form

SelectButton

A segmented control for one choice, as a radio group, or several, as toggle buttons.

WAI-ARIA tested

Import

main.ts
import { SelectButton } from '@vitral/vue';

Single

value: Week
<script setup lang="ts">import { SelectButton } from '@vitral/vue';import { ref } from 'vue'; const view = ref('Week');</script> <template>    <div style="display: grid; gap: 0.5rem; justify-items: start">        <SelectButton v-model="view" :options="['Day', 'Week', 'Month']" label="Calendar view" :allow-empty="false" />        <small style="color: var(--vt-text-muted-color)">value: {{ view }}</small>    </div></template>

Icons

value: left
<script setup lang="ts">import { SelectButton } from '@vitral/vue';import { ref } from 'vue'; const align = ref('left');const alignments = [    { label: 'Left', value: 'left', icon: 'menu' },    { label: 'Center', value: 'center', icon: 'sliders' },    { label: 'Right', value: 'right', icon: 'sidebar' }];</script> <template>    <div style="display: grid; gap: 0.5rem; justify-items: start">        <SelectButton v-model="align" :options="alignments" option-label="label" option-value="value" option-icon="icon" label="Alignment" />        <small style="color: var(--vt-text-muted-color)">value: {{ align }}</small>    </div></template>

Multiple

value: ["bold"]
<script setup lang="ts">import { SelectButton } from '@vitral/vue';import { ref } from 'vue'; const formats = ref<string[]>(['bold']);const formatOptions = [    { label: 'Bold', value: 'bold' },    { label: 'Italic', value: 'italic' },    { label: 'Underline', value: 'underline' }];</script> <template>    <div style="display: grid; gap: 0.5rem; justify-items: start">        <SelectButton v-model="formats" :options="formatOptions" option-label="label" option-value="value" multiple label="Text format" />        <small style="color: var(--vt-text-muted-color)">value: {{ JSON.stringify(formats) }}</small>    </div></template>

Sizes and states

<script setup lang="ts">import { SelectButton } from '@vitral/vue';import { ref } from 'vue'; const plan = ref('pro');const plans = [    { name: 'Free', code: 'free' },    { name: 'Pro', code: 'pro' },    { name: 'Enterprise', code: 'ent', off: true }];</script> <template>    <SelectButton v-model="plan" :options="plans" option-label="name" option-value="code" option-disabled="off" size="small" label="Plan (small)" />    <SelectButton v-model="plan" :options="plans" option-label="name" option-value="code" option-disabled="off" size="large" label="Plan (large)" />    <SelectButton :model-value="'pro'" :options="plans" option-label="name" option-value="code" disabled label="Plan (disabled)" /></template>

API

Read from packages/vue/src/components/SelectButton/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
optionsany[]—
optionLabelstringField (dotted path) holding an option's text. Without it, options are shown as they are.
optionValuestringField holding the value v-model receives. Without it, the whole option is the value.
optionDisabledstring—
optionIconstringField holding an option's icon.
multiplebooleanSeveral options at once; v-model is then an array.
allowEmptybooleanLet the pressed option be pressed again to clear it. Defaults to true.
dataKeystringCompare object values by this field instead of structurally.
sizeSize—
disabledboolean—
invalidboolean—
fluidboolean—
labelstringNames the group; without it, name it with `aria-label` or `aria-labelledby`.

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Emits

EventPayloadDescription
changeevent: SelectButtonChangeEvent—

Slots

NameSlot propsDescription
option(props: { option: unknown; index: number; checked: boolean })—
icon(props: { option: unknown; icon?: IconProp })—

Used in these templates