Showcase index
Actions
Forms
Feedback
Content
Options
Togglers, checkboxes, radios, card options and the slider.
Togglers
The system switch: a native checkbox underneath, with keyboard, focus and a clickable label for free. It takes the same intents as the buttons.
.es-switch
.es-switch--sm … --lg
.es-switch + .es-i--*
Checkboxes
The check box over the native input: checked, indeterminate and disabled are states only the element delivers for free.
.es-check
.es-check--sm … --lg, .es-check--round
.es-check + .es-i--*
Radio buttons
The same drawing in a round outline. Exclusivity and the keyboard arrows come from the name attribute, never from script.
.es-radio
.es-radio--sm … --lg
Card options
The radio and the checkbox with a card body, for choices that need a title, a description and an icon. The highlight reads the real input state, with no script-driven class.
.es-option + <echo-radio>
.es-option + <echo-checkbox>
Sliders
The native range input with the system track and thumb. Arrows, Home and End come from the element.
Rating
Two modes, and the difference is semantic: read-only outputs a value with the number spelled out in the label; interactive is a real native radio group, with keyboard arrows for free.
readonly
.es-rating--sm … --lg
.es-rating + .es-i--*
<echo-rating> interactive
Tab to reach the group and use the arrows to choose.