Radio Component: Multiple Display States, Event, and Method Examples
Category: ExamplesThe 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.
Getting Values
Values can be obtained just like native elements, accessing the component's name, value, checked, and disabled properties.
Multi-line Text Layout
For options with lengthy content (paragraphs or more), use type="text" for plain text distribution.
Button Style Layout
Use the type="btn" attribute to make the control appear as a button.
Disabled State
The radio's disabled state is set via the disabled attribute. The disabled state has two characteristics:
Free Layout
Regular radio components include spacing (gaps), allowing automatic line breaks without interference.
Flex Layout
Use flex-related style classes for flexible layouts.
Grid Layout
Use grid-related style classes for grid layouts.
Form Container
This framework uses the _field container to build form sections.
Sizes
Similar to button components, there are 4 size options for radio components. Set the size via the size attribute with these possible values:
- size=sm: Height 2.4rem (24px)
- size=md: Height 3.2rem (32px)
- size=lg: Height 4.0rem (40px)
- size=xl: Height 5.6rem (56px)
Button style can use size attribute:
Chera style can use size attribute:
Validation
The validation module works with radio components, typically using required validation (default).
Operation Methods
Built-in methods include reset(), clear() and set(data):
Using Cache
When changing element properties or checked values, if you need to cache data to restore previous states when reloading the page, use the stor-name attribute. Ensure this value is unique in browser storage.
Event Listening
Since the component contains a non-hidden text field, it has all text field events (input, change, paste, etc.). It's recommended to use addEventListener to subscribe to events.
Since using addEventListener for parameters is cumbersome, another set of listening events is provided:
