Checkbox

An enhanced native <input type="checkbox"> supporting indeterminate state and checkbox groups.

Basic Usage

Basic usage

CheckedUnchecked

Example

Indeterminate State

Indeterminate

Indeterminate

Example

Use it with select-all linkage scenarios (see the example below) to express "partially selected".

Disabled

Disabled

Checked & disabledUnchecked & disabled

Example

Checkbox Group

Checkbox group

Fruits (multiple selectable)AppleBananaOrange

Example

The group is controlled via value (a JSON array); each item's value acts as the option identifier.

Select All / Indeterminate Linkage

Select-all & indeterminate linkage

Select allAppleBananaOrange

Example

Events

Selection events

AppleBananaOrange

Example

Listen to oas-change: a single item dispatches detail: { checked, value }, the group dispatches detail: { value: string[] }.

API

Attributes

Attribute	Description	Type	Default
checked	Whether checked	boolean	—
disabled	Disabled	boolean	—
indeterminate	Indeterminate state	boolean	—
value	Option identifier	string	—

Events

Event	Description
oas-change	Change, detail: { checked, value }; group: detail: { value } (array)

Slots

Name	Description
default	—

oas-checkbox-group: value (JSON array), disabled, supports slot="label" to set the group title.