Checkbox

Interactive documentation for the checkbox component. Change props in the playground, inspect states, and copy the generated example.

Preview

Code

<Checkbox
  v-model="checked"
  label="Check me"
  description="This is a description"
  required
/>

Sizes

All available checkbox sizes.

xs

s

m

l

xl

Colors

Available color variants in unchecked and checked states.

midnight

basil

amber

States

Dedicated examples for disabled, error, required, and description states.

Disabled

Error

Without description

Required

Props

This table matches the current CheckboxProps interface.

PropTypeDefaultRequiredDescription
modelValuebooleanundefinedRequiredCurrent checkbox checked state. Used with v-model binding.
labelstring''OptionalText displayed next to the checkbox.
descriptionstringundefinedOptionalAdditional helper text displayed below the label.
requiredbooleanfalseOptionalShows a required asterisk next to the label.
size'xs' | 's' | 'm' | 'l' | 'xl''m'OptionalControls checkbox size, icon size, label text size, and description spacing.
color'midnight' | 'basil' | 'amber''midnight'OptionalControls checked, hover, and focus colors.
errorbooleanfalseOptionalSwitches checked and focus styles to error state.
disabledbooleanfalseOptionalDisables checkbox interactions and applies disabled visual styles.
idstringundefinedOptionalNative input id attribute.
namestringundefinedOptionalNative input name attribute.