Segmented Control
Segmented Control picks one of two to five options shown as joined buttons. It is native radios in a fieldset, CSS only.
Public web API
A fieldset with a legend, and one label wrapping each radio.
<fieldset data-bitsy-segmented-control>
<legend class="u-visually-hidden">View</legend>
<label data-bitsy-segmented-control-option><input type="radio" name="view" value="list" checked>List</label>
<label data-bitsy-segmented-control-option><input type="radio" name="view" value="grid">Grid</label>
</fieldset>- Tab enters on the checked option and arrow keys move and select, with no script.
data-bitsy-size="sm"anddata-bitsy-width="full"go on the fieldset.- Icon-only options need
aria-labelon the input.
Sizes and states
The selected segment is raised with a border, so it does not rely on color.
Bit boundary
Segmented Control is one choice among a few visible options.
- To switch panels of content, use Tabs.
- For more than five options or long labels, use Radio Group or Select.
- For independent on/off options, use Checkbox or Toggle Button.