Home›Docs›Form›Radio Component

Radio Component

Last updated: 4 months ago

Category: Form

The radio component is an enhanced wrapper for native input[type=radio], supporting three states: check, checking and checked. It offers multiple sizes to fit different form layouts, supports data caching and form validation, accommodates chera-style structure, and provides basic operations like reset, set and clear.

Radios(group) Component: Multiple Display States, Event, and Method Examples4 months ago Radios(group) Component4 months ago Radio Component: Multiple Display States, Event, and Method Examples4 months ago Radio Component4 months ago

Basic Usage

Wrap text with the oc-radio tag to automatically create a radio component. The label can be either the tag's innerHTML or specified via the label attribute.

Output
HTML

Japan
```
                
                
            
```

Name and Value

The radio component's core remains an input[type=radio] 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 radio 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 radios 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')})

Tags: Native, Vanilla, Web Components

Checkboxes(group) Component: Multiple Display States, Event, and Method Examples

4 months ago

Radio Component: Multiple Display States, Event, and Method Examples