Checkbox Component: Multiple Display States, Event, and Method Examples
Category: ExamplesThe checkbox is one of the most common form fields, supporting multiple attributes and basic operations like reset, set, clear, and check. It also supports data caching and validation.
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.
Switch Style
The checkbox component can be styled as a toggle switch by setting type=switch.
For switch-style checkboxes, text labels can be added using the lang.on and lang.off properties.
Due to space constraints, only 1 Chinese character or up to 3 English letters can be displayed.
Alternative Switch Style
Switch components can use lang.on and lang.off, but space is limited. To display more text, add the contained attribute.
Disabled State
The checkbox's disabled state is set via the disabled attribute. The disabled state has two characteristics:
Free Layout
Regular checkbox 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 checkbox 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)
Switch style can use size attribute:
Button style can use size attribute:
Chera style can use size attribute:
Validation
The validation module works with checkbox components, typically using required validation (default) or count type validation.
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:
