Checkboxes(group) Component
Category: FormThe checkboxes component allows creating multiple checkbox form fields at once and supports batch checked operations.
Introduction
The oc-checkboxes component is a wrapper around the oc-checkbox component, designed to quickly create multiple checkbox form fields with the same name.
The oc-checkboxes component inherits all properties from oc-checkbox while adding new ones like layout, cols, wrap-classes, item-classes, input-classes and content.
Data Written Inside Tags
The core of building multiple checkboxes is obtaining data for each checkbox, including label, value, disabled and checked status. Data can be written as text inside the tags or in the content attribute.
For complex data, it's recommended to use the content attribute to reference data variables.
- Output
- HTML
-
[ {label:'Japan',value:'Japan',disabled:false,checked:true}, {label:'India',value:'India',disabled:false,checked:false}, {label:'South Korea',value:'South Korea',disabled:false,checked:false} ] -
If label and value are identical, simplified data format can be used:
- Output
- HTML
-
['Japan','India','South Korea'] -
Data Written in Attributes
Multiple checkboxes can also be built using the content attribute. For larger datasets, use the content attribute to reference variables.
- Output
- HTML
When variables are predefined, the content attribute can reference them:
- Output
- HTML
checked Attribute
The checked attribute specifies which checkboxes should be in checked state. Since this is a checkbox group, multiple values can be specified (the values correspond to individual checkbox value properties, or label values if using simplified format).
- Output
- HTML
-
[ {label:'Japan',value:'Military',disabled:false,checked:false}, {label:'India',value:'People',disabled:false,checked:false}, {label:'South Korea',value:'Entertainment',disabled:false,checked:false} ] -
disable Attribute
The disable attribute specifies which checkboxes should be in disabled state. It accepts single or multiple values (using value not label) in these formats:
- Single value text, e.g.: disable='Japan'
- Single value array, e.g.: disable="['Japan']"
- Multiple values text, comma-separated, e.g.: disable='Japan,India'
- Multiple values array, e.g.: disable="['Japan','India']"
- Output
- HTML
-
[ {label:'Japan',value:'Military',disabled:true,checked:true}, {label:'India',value:'People',disabled:false,checked:false}, {label:'South Korea',value:'Entertainment',disabled:true,checked:false}, {label:'Germany',value:'Finance',disabled:false,checked:false} ] -
Attributes
| Name | Values | Default | Description |
|---|---|---|---|
| name | - | - | Form field name |
| content | - | - | Data source |
| checked | - | - | Items to set as checked |
| size | 'sm'/'md'/'lg' | 'md' | Size |
| disable | - | - | Items to disable |
| type | 'chera'/'switch'/'btn'/'text' | - | Display variant |
| layout | 'grid'/'flex'/'block' | 'block' | Layout method |
| cols | - | 4 | Number of columns in grid |
| wrap-classes | - | - | Wrapper container classes |
| item-classes | - | - | Individual item classes |
| input-classes | - | - | Internal form field classes |
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')})
