🌏 Translated with the assistance of DeepSeek and ChatGPT

Checkbox

This is for multiple choices.

Basic Usage

For the Checkbox component, passing modelValue puts it in controlled mode. Not passing it or passing undefined puts it in uncontrolled mode, where you can pass the defaultValue property as the default value.

Checkbox has two style variants: normal mode ('normal', default) and retro mode (retro). The retro mode style is a tribute to early game UI.

Basic Checkbox

Uncontrolled

Set Label By Prop

Retro Style

Retro Style Checked

Hide source code

Disabled and Read-only States

For the Checkbox component, use readonly to set it as read-only and disabled to set it as disabled. In both cases, the internal <input> will be set to disabled, and the difference between them is almost only in styling.

Checked

Unchecked

Checked Readonly

Unchecked Readonly

Checked

Unchecked

Checked Readonly

Unchecked Readonly

Hide source code

Checkbox Group

You can combine CheckboxGroup and Checkbox to form a checkbox group.

The value of CheckboxGroup is an array composed of the value of selected Checkbox components.

Similarly, CheckboxGroup enters controlled mode when modelValue is passed. Not passing it or passing undefined puts it in uncontrolled mode, where you can pass the defaultValue property as the default value.

Abigail

Harvey

Leah

Maru

Elliott

Haley

Penny

Sebastian

Retro Style

Dwarf

Krobus

Readonly

Sam

Shane

Disabled

Alex

Clint

Hide source code

Indeterminate State

Setting Checkbox's indeterminate to true can put the checkbox in an indeterminate state. This property only controls the styling and is independent of the current checkbox value.

Normal

Retro

Select All

Blue Jazz

Carrot

Coffee Bean

Parsnip

Hide source code

Vertical Arrangement

The direction property of CheckboxGroup is used to set the arrangement direction of child checkboxes.

Horizontal

Vertical

Normal

Retro

Anchovy

Tuna

Sardine

Bream

Hide source code

Checkbox Sizes

Both Checkbox and CheckboxGroup have a size property that can be used to set the size of checkbox.

Single Checkbox

Small

Medium

Large

Small & Retro

Medium & Retro

Large & Retro

Group

A

B

C

D

A

B

C

D

A

B

C

D

Hide source code

Options Property

The options property of CheckboxGroup is used to directly pass in options, enabling quick creation of simple checkbox groups.

Normal

Retro

Lava Eel

Ice Pip

Midnight Carp

Slimejack

Hide source code

API

CheckboxProps

Attribute	Type	Optional	Default	Description	Version
modelValue	boolean | null	True		The value of the Checkbox component (controlled mode).	0.0.3
defaultValue	boolean | null	True		The default value of the Checkbox component (uncontrolled mode).	0.0.3
indeterminate	boolean	True	false	Indeterminate state.	0.0.3
disabled	boolean	True	false	Disabled state.	0.0.3
readonly	boolean	True	false	Read-only state.	0.0.3
variant	'normal' | 'retro'	True	'normal'	The style variant of the checkbox.	0.0.3
label	string	True		The text of the checkbox.	0.0.3
value	any	True		the native value attribute of checkboxes.	0.0.3
size	'medium' | 'large' | 'small'	True	'medium'	Size of the checkbox.	0.0.3
pollSizeChange	boolean	True	false	Enables polling for component size changes. This may impact performance.	0.1.0

CheckboxEvents

Event	Parameter	Description	Version
update:modelValue	value: boolean	Callback for updating modelValue.	0.0.3
input	value: boolean, event: InputEvent	Callback for selecting/deselecting the checkbox.	0.0.3
change	value: boolean, event: Event	Callback for when the checkbox selection state changes.	0.0.3
focus	event: FocusEvent	Callback for when the checkbox is focused.	0.0.3
blur	event: FocusEvent	Callback for when the checkbox loses focus.	0.0.3

CheckboxSlots

Slot	Parameter	Description	Version
default		The text of the checkbox.	0.0.3

CheckboxGroupProps

Attribute	Type	Optional	Default	Description	Version
modelValue	any[] | null	True		The value of the CheckboxGroup component (controlled mode).	0.0.3
defaultValue	any[] | null	True		The default value of the CheckboxGroup component (uncontrolled mode).	0.0.3
disabled	boolean	True	false	Disabled state.	0.0.3
readonly	boolean	True	false	Read-only state.	0.0.3
variant	'normal' | 'retro'	True		The style variant for descendant Radio components, which takes precedence over the variant of individual Radio components if set.	0.0.3
direction	'horizontal' | 'vertical'	True	'horizontal'	The arrangement direction of child checkbox components.	0.0.3
options	(CheckboxGroupOption | string)[]	True		Options for the checkbox group.	0.0.3
size	'medium' | 'large' | 'small'	True	'medium'	Size for descendant checkbox components. When set, it overrides the size prop on those components.	0.0.3
pollSizeChange	boolean	True	false	Enables polling for component size changes. This also affects the property of the same name in Checkbox sub-components.	0.1.0

CheckboxGroupEvents

Event	Parameter	Description	Version
update:modelValue	value: any[]	Callback for updating modelValue.	0.0.3
change	value: any[]	Callback for when the checkbox group selection changes.	0.0.3

CheckboxGroupSlots

Slot	Parameter	Description	Version
default		Child checkbox components.	0.0.3

Option

export interface Option<T = any> {
	value: T
	label: string
}

CheckboxGroupOption

export interface CheckboxGroupOption<T = any> extends Option<T> {
	disabled?: boolean
	key?: string | number | symbol
}