Ui3nCheckbox

Checkbox component with support for custom values, indeterminate state, and various customization options.

Props

Name	Type	Default	Description
id	string | undefined	—	Root element id
name	string | undefined	—	HTML name attribute for form submission
modelValue*	Ui3nCheckboxValue	false	Current checkbox value
checkedValue	Ui3nCheckboxValue | undefined	true	Value when checkbox is checked
uncheckedValue	Ui3nCheckboxValue | undefined	false	Value when checkbox is unchecked
size	string | number | undefined	16	Checkbox size
color	string | undefined	"var(--color-icon-control-accent-default)"	Checkbox color
indeterminate	boolean | undefined	false	Whether checkbox is in indeterminate state
disabled	boolean | undefined	false	Whether checkbox is disabled

Events

Event Name	Arguments / Value Type	Description
update:modelValue	value: Ui3nCheckboxValue	—
change	value: Ui3nCheckboxValue	—

Slots

Slot Name	Scope Props (v-slot)	Description
#default	—	Default slot

Public Methods & Exposes

Method Name	Signature / Type	Description
clear()	() => void	—

CSS Variables

Set any of these where you need it — on :root, on a container, or on the element itself through [data-ui3n] — and the component follows. Leave them alone and it uses the defaults below.

Name	Default
--ui3n-checkbox-color	var(--color-icon-control-accent-default)
--ui3n-checkbox-gap	4px
--ui3n-checkbox-size	16px
--ui3n-checkbox-text-color	var(--color-text-control-primary-default)
--ui3n-checkbox-text-size	12px
--ui3n-checkbox-text-weight	500

Usage Examples

Basic usage

Basic usage

Simple checkbox with v-model binding

Value: false

With label

With label

Checkbox with text label using default slot

I agree to the Terms and Conditions

Subscribe to newsletter

Sizes

Sizes

Different checkbox sizes: 12px, 16px, 24px, 32px

Small (12px)

Medium (16px) - default

Large (24px)

Extra Large (32px)

Colors

Colors

Custom checkbox colors using the color prop

Blue

Green

Red

Purple

Orange

Indeterminate state

Indeterminate state

Checkbox in indeterminate (partial) state - useful for select all scenarios

Select All

Item 1

Item 2

Item 3

Item 4

Selected: 2 of 4

Disabled state

Disabled state

Disabled checkbox that cannot be interacted with

Enabled checkbox

Disabled (checked)

Disabled (unchecked)

Custom values

Custom values

Using custom checkedValue and uncheckedValue instead of boolean

String values (active/inactive):

Status: inactive

Number values (1/0):

High priority: 0

Theme selection:

Dark mode: OFF