Checkbox Component
Category: FormThe checkbox is one of the most common form fields, supporting multiple attributes and basic operations like reset, set, clear, and check. It also supports data caching and validation.
Basic Usage
Wrap text with the oc-checkbox tag to automatically create a checkbox component. The label can be either the tag's innerHTML or specified via the label attribute.
- Output
- HTML
-
Japan -
Name and Value
The checkbox component's core remains an input[type=checkbox] form element, so it typically requires name and value attributes. If no value is provided, the label will be used as the value.
- Output
- HTML
-
Japan India South Korea Germany -
The above example doesn't use the value attribute, but inspecting the element shows the input automatically gets a value matching the label. However, we recommend explicitly setting the value attribute.
Check States
The checkbox has three states controlled by the check attribute:
- check=ing: Partially checked or pending state
- check=ed: Fully checked
- check=''/null: Default unchecked state
- Output
- HTML
-
Japan India South Korea Germany -
Block Layout
Set type=chera to display checkboxes in a block layout.
- Output
- HTML
-
Japan India South Korea Germany -
Attributes
| Name | Values | Default | Description |
|---|---|---|---|
| name | - | - | Form field name |
| value | - | - | Form field value |
| check | 'ing'/'ed'/''/- | - | Check state |
| label | '' | - | Label text |
| size | 'sm'/'md'/'lg' | 'md' | Size |
| disabled | boolean | - | Disabled state |
| type | 'chera'/'switch'/'btn'/'text'/- | - | Display variant |
| contained | boolean | - | Contain switch label |
Common Methods
Common component methods:
set: Set properties (takes key-value pairs or array)reset: Reset properties (no params)clear: Clear properties and values (no params)
Basic usage: CompElem.reset()
Common Events
Common component events:
connected: Component connected (no params)disconnected: Component disconnected (no params)adopted: Component moved (no params)set: Property set (receives value)cleared: Property cleared (no params)reset: Property reset (no params)
Basic usage: CompElem.on('connected',()=>{console.log('connected')})
