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`	—

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

Indeterminate state

Indeterminate state

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

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