Radios(group) Component
Category: FormThe radios component allows creating multiple radio form fields at once and supports batch checked operations.
Introduction
The oc-radios component is a wrapper around the oc-radio component, designed to quickly create multiple radio form fields with the same name.
The oc-radios component inherits all properties from oc-radio 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 radio component should be in the checked state. Since this is a radio group, this attribute only accepts a single value, which should be the value text of one radio component (if using simplified data format where label=value).
- 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:false,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'/'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')})
