Checkboxes(group) Component: Multiple Display States, Event, and Method Examples
Category: ExamplesThe checkboxes component allows creating multiple checkbox form fields at once and supports batch checked operations.
Using script Tags
Simplest Data Format
layout and cols Attributes
Use the layout and cols attributes to arrange multiple checkboxes.
type Attribute
type=btn displays as buttons matching regular button sizes.
type=text displays as text paragraphs for options with more text.
Form Container
This framework uses _field containers to build form sections. Checkboxes components can be placed in _field-input containers.
Sizes
Like checkbox components, there are 4 size options set via the size attribute:
Getting Values
Values can be obtained like native elements, accessing the component's name, value and disabled properties.
Validation
The validation module works with checkboxes groups, typically using required validation (default) or count type validation.
Native Events
Since the component contains native form fields, it has input and change events. It's recommended to use addEventListener to subscribe, though on+event also works.
changed Event Listener
The checkbox group's output object is propsProxy, with the proxied object properties. We can read current check values via properties.value. When checked states change, the changed event fires.
Operation Methods
Built-in methods include reset(), clear(), set(data), plus check(val,type,from), checkedAll(), checkedMore(vals) and checkedLess(vals):
Select All Toggle
Unlike oc-radios, oc-checkboxes supports select-all, partial-select and deselect-all via toggle buttons.
Using Cache
When changing element properties or checked values, use stor-name to cache data and restore states on reload. Ensure the value is unique in browser storage.
