Showcase index
Start
Actions
Forms
Navigation
Authentication
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.
For AI agents
This page’s specification
A Markdown file with this family’s tags, props, events and snippets, copyable verbatim, plus the rules that apply before any line of code. Hand it to the agent along with the task.
/agents/options.md