Switch

On/off toggle for settings that apply immediately. Supports a size prop: xs, sm, md (default), lg, xl.

Jump to API reference

Import

Vue
import { UiSwitch } from '@ziyarago/ui/vue'

States

Vue
<UiSwitch label="Prayer reminders" v-model="value" />

<UiSwitch label="Email notifications" v-model="value" />

Disabled

Vue
<UiSwitch label="Prayer reminders" v-model="value" disabled />

<UiSwitch label="Email notifications" v-model="value" disabled />

Sizes

Vue
<UiSwitch size="xs" label="Prayer reminders" v-model="value" />

<UiSwitch size="sm" label="Prayer reminders" v-model="value" />

<UiSwitch size="md" label="Prayer reminders" v-model="value" />

<UiSwitch size="lg" label="Prayer reminders" v-model="value" />

<UiSwitch size="xl" label="Prayer reminders" v-model="value" />

API reference

On/off toggle with an inline label. Use for settings that apply immediately.

Props

PropType and valuesDefaultDescription
modelValuev-modelbooleanfalseOn state.
labelstring—Text next to the toggle.
hintstring—Second line under the label.
errorstring—Error message under the label (announced with role="alert").
labelLeftbooleanfalsePlaces the label before the toggle instead of after it.
disabledbooleanfalseDisables the control.
sizexssmmdlgxl'md'Track and label size.

Events

Vue: @name. React: onName.

changeCalled with the toggled boolean.

Notes

  • Rendered as a button with role="switch". When disabled it is dimmed, shows a not-allowed cursor and ignores clicks.