Checkbox Select

pk-checkbox-select is a compact multi-select checklist. Pass options as a JSON options attribute (or the options property in JS) — it does not take slotted pk-checkbox children. Wrap in pk-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 pk-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

Attributes & Properties

Name	Description
allLabel all-label	Type string Default All
ariaLabel aria-label	Type string | null Default null
disabled	Type boolean Default false
options	Type PkCheckboxSelectOption[] Default []
orientation	Type PkCheckboxSelectOrientation Default vertical
showAllOption show-all-option	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	—