Checkbox

Boolean checkbox with an inline label. Supports a size prop: xs, sm, md (default), lg, xl.

Jump to API reference

Import

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

States

Vue
<UiCheckbox label="Accept terms" v-model="value" />

<UiCheckbox label="Subscribe to offers" v-model="value" />

Disabled

Vue
<UiCheckbox label="Accept terms" v-model="value" disabled />

<UiCheckbox label="Subscribe to offers" v-model="value" disabled />

Sizes

Vue
<UiCheckbox size="xs" label="Accept terms" v-model="value" />

<UiCheckbox size="sm" label="Accept terms" v-model="value" />

<UiCheckbox size="md" label="Accept terms" v-model="value" />

<UiCheckbox size="lg" label="Accept terms" v-model="value" />

<UiCheckbox size="xl" label="Accept terms" v-model="value" />

API reference

Boolean checkbox with an inline label. Use for opt-ins and independent yes/no choices.

Props

PropType and valuesDefaultDescription
modelValuev-modelbooleanfalseChecked state.
labelstring—Text next to the box.
hintstring—Second line under the label.
errorstring—Error message under the label (announced with role="alert"); a boolean or empty string shows nothing.
indeterminatebooleanfalseShows a dash instead of a check (aria-checked="mixed"). Clicking calls change with true.
disabledbooleanfalseDisables the control.
sizexssmmdlgxl'md'Box and label size.

Events

Vue: @name. React: onName.

changeCalled with the toggled boolean.

Notes

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