checkbox

Checkbox

Lets the user tick an option on or off, with an indeterminate state drawn as a minus and a hit area wider than the box.

States: Default, Focus, Checked, Disabled, Invalid

Parts

PartFileDoes
CheckboxCheckbox.vueLets the user switch an option on or off.

Styling

PartRecipe
Checkboxcheckbox

Install

Writes 2 files into components/ui/checkbox/. For agents, npx @frontic/ui docs checkbox prints this reference as markdown; the MCP server serves the same.

npm packages
@lucide/vue
@vueuse/core
reka-ui

API reference

Checkbox Checkbox.vue

Lets the user switch an option on or off. Renders a <button>.

PropTypeDefault
defaultValueboolean | 'indeterminate'—
modelValueboolean | 'indeterminate' | null—
disabledbooleanfalse
valueAcceptableValue'on'
idstring—
trueValueboolean—
falseValueboolean—
asChildbooleanfalse
asAsTag | Component'button'
namestring—
requiredbooleanfalse
classClassValue—
EventPayload
update:modelValuevalue: boolean | "indeterminate"
SlotSlot props
default{ modelValue: boolean | "indeterminate"; state: CheckedState; }
Data attributeValues
data-disabled—
data-state'checked' | 'unchecked' | 'indeterminate'
Recipe checkboxSets
base: checkbox 13 properties · 7 inherited
focus-ringshared state 3 properties
invalidshared state 3 properties
disabledshared state 1 property
Example
State