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

Last updated: 1 month ago

Category: Examples

The radios component allows creating multiple radio 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 radios.

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 radio components, there are 4 size options set via the size attribute:

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.

checked Event Listener

When a form field is checked, the checked event is triggered, which accepts one parameter - the form field that was checked.

Operation Methods

Built-in methods include reset(), clear(), set(data), plus check(val,type,from), checkedAll(), checkedMore(vals) and checkedLess(vals):

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.