Checkbox

Checkbox renders a beautiful checkbox input.

Code Example

<Checkbox v-model="isChecked" />

Components

Checkbox is a standalone component.

Checkbox

Checkbox can be customized using the following props:

Prop	Type	Description
`model-value`	string	controls the checked state. Use with `v-model`
`disabled`	boolean	Disables the component both visually and functionally.
`color`	string	Sets the color to one of the below prop names.
neutral	boolean	Sets the color to neutral.
primary	boolean	Sets the color to primary.
secondary	boolean	Sets the color to secondary.
accent	boolean	Sets the color to accent.
info	boolean	Sets the color to info.
success	boolean	Sets the color to success.
warning	boolean	Sets the color to warning.
error	boolean	Sets the color to error.
`size`	string	Sets the size. Can be set to one of the below size prop names.
`lg`	boolean	Sets the size to `lg`
`md`	boolean	Sets the size to `md` (the default)
`sm`	boolean	Sets the size to `sm`
`xs`	boolean	Sets the size to `xs`

Color

There are two ways of specifying color:

The primary, secondary, neutral, accent, info, success, warning, and error boolean props.
The color prop, which accepts a string with any of the above prop names.

Code Example

<Checkbox v-model="isChecked" primary />

Size

There are two ways of specifying size:

The xs, sm, md, and lg boolean props.
The size prop, which accepts a string with any of the above prop names.

lgmdsmxs

Code Example

<Checkbox v-model="isChecked" lg />

With Label

Wrapping Checkbox and LabelText inside of a Label produces a nice UX. The user can click anywhere inside the Label to toggle the checkbox state.

Remember Me

Code Example

<Label class="cursor-pointer">
  <LabelText>Remember Me</LabelText>
  <Checkbox v-model="isChecked" />
</Label>

Prev FormControl

Next FileInput