Checkbox

The Checkbox component is a reusable UI element for user interactions. It supports multiple styles, states, and sizes.

Props

Prop	Type	Default	Description
variant	string	'primary'	Visual style of the Checkbox. Options: primary and secondary
disabled	boolean	false	Disables interaction when true.
size	string	sm	Size of the Checkbox. Options: sm, md.

Example component with all props

<Checkbox variant="primary" size="md" disabled />

Variants

Primary

The primary Checkbox is the default style and is used for the most common actions.

<Checkbox v-model="selectedPrimary" value="option1" />

Secondary

The secondary Checkbox is used for secondary actions.

<Checkbox v-model="selectedSecondary" value="option2" variant="secondary" />

Disabled

The disabled Checkbox is used for disabled actions.

<Checkbox disabled />

Sizes

sm

The sm size is the default size and is used for most Checkboxs. Setting this property is not required.

<Checkbox v-model="selectedSm" value="option1" variant="primary" size="sm" />

md

The md size provides a medium-sized Checkbox, which is larger than the default sm size. Use this size for emphasis or when a larger clickable area is needed.

<Checkbox v-model="selectedMd" value="option1" variant="primary" size="md" />