Checkbox Select

CheckboxSelect is a compact multi-select checklist. Pass options as a JSON options prop (or the options property in JS) — it does not take slotted Checkbox children. Wrap in Field when you need a Craft-style label and instructions.

Basic Usage

Multiple selection with a concrete value array.

All Option

show-all-option adds a master checkbox. Checking it sets value to "*".

All Selected

Use value="*" when every option should be treated as selected without storing each id.

Selected Values

Use a JSON string array when the setting stores a concrete set of selected options.

Field Layout

Labels and instructions belong on Field around the control.

Disabled States

Disable the whole group when the selection is present for context but locked.

Long Lists

Longer option labels still stack cleanly in the default vertical orientation.

API

Props

Name	Description
allLabel	Type string Default All
ariaLabel	Type string | null Default null
disabled	Type boolean Default false
options	Type PkCheckboxSelectOption[] Default []
orientation	Type PkCheckboxSelectOrientation Default vertical
showAllOption	Type boolean Default false
value	Selected values, or * when the All option is active. Type PkCheckboxSelectValue Default []

Events

Name	Description
@change	—
@pk-change	{ value: string[] | '*' }

CSS Parts

Name	Description	CSS selector
base	Checkbox options container	::part(base)

Dependencies

This component registers the following elements when it loads.

Name	Description
pk-checkbox	—