Checkbox

A checkbox field for forms.

Install

Run the following command to install the checkbox component:

npx acc-nuxt add Checkbox

Examples

Default

With label

Custom error

Loading

Disabled

Sizes

Form

The checkbox component can be used in a form with vee-validate and zod.

Form Checkbox

Form default values

Form Required

Form Checkbox with Label component

Form values: { "newsletter": true } | Form errors: {}

Slots

The checkbox component provides the following slots for customization.

#skeleton
Slot for rendering a custom skeleton content while the checkbox is loading.

Props

The checkbox component accepts the following props to customize its behavior.

disabled:boolean— optional
default:false
When true, the checkbox is disabled.
validate:boolean— optional
default:true
When true, uses vee-validate for form validation.
name:string— optional
default:undefined
The name attribute used for vee-validate field registration.
defaultValue:boolean— optional
default:false
The default value for the checkbox field.
loading:boolean— optional
default:false
When true, displays a skeleton state on the checkbox.
defaultError:string— optional
default:undefined
The default error message from vee-validate useField.
customError:boolean— optional
default:undefined
A custom error that applies error border styling to the checkbox.
disabledErrors:boolean— optional
default:false
When true, prevents validation error styling from being applied. The customError prop still applies error styling, as it is managed manually.
size:string— optional
default:md
Controls checkbox size and icon size. Options: sm, md, lg.

Emits

@change
Emitted when the checkbox state changes.

CSS Variables

The checkbox component can be customized using the following CSS variables.

--lev-checkbox-size
default:16px
Width and height of the checkbox.
--lev-checkbox-border
default:1px solid #c3c6c7
Border style of the checkbox.
--lev-checkbox-border-radius
default:4px
Border radius of the checkbox corners.
--lev-checkbox-bg
default:#ffffff
Background color of the checkbox.
--lev-checkbox-cursor
default:pointer
Cursor style when hovering over the checkbox.
--lev-checkbox-transition
default:border-color 100ms ease-out, background-color 100ms ease-out
Transition effects for the checkbox.
--lev-checkbox-error-border-color
default:#ef4444
Border color when the checkbox has an error.
--lev-checkbox-disabled-bg
default:#d4d7d9
Background color when the checkbox is disabled.
--lev-checkbox-disabled-border-color
default:#aaacad
Border color when the checkbox is disabled.
--lev-checkbox-hover-border-color
default:#aaacad
Border color when hovering over the checkbox.
--lev-checkbox-focus-outline
default:1px solid #1d66bf
Outline style when the checkbox is focused.
--lev-checkbox-focus-outline-offset
default:1px
Outline offset when the checkbox is focused.
--lev-checkbox-checked-icon-size
default:12px
Size of the checkmark icon when checked.
--lev-checkbox-checked-bg
default:#1d66bf
Background color when the checkbox is checked.
--lev-checkbox-checked-border-color
default:#1d66bf
Border color when the checkbox is checked.
--lev-checkbox-checked-disabled-bg
default:#d4d7d9
Background color when the checkbox is checked and disabled.
--lev-checkbox-checked-disabled-border-color
default:#d4d7d9
Border color when the checkbox is checked and disabled.
--lev-checkbox-checked-hover-bg
default:#175299
Background color when hovering over a checked checkbox.
--lev-checkbox-checked-hover-border-color
default:#175299
Border color when hovering over a checked checkbox.

On This Page