Skip to content 
Segmented control - CSS Component
The SegmentedControl component can be used imported from:
Playground
Construction
The CSS component uses a div tag with the z-segmented-control param.
Each label inside the z-segmented-control container should contain a button component with the z-button HTML custom attribute, followed by a <input type="radio"> tag with the actual value.
Important!
All the <input type="radio"> tags need to have the same name attribute, and this needs to be unique.
Each Button needs to have the onclick="this.nextElementSibling.click() attribute or using the provided JS tooling, and the <input type="radio"> should have the tabindex="-1" to ensure proper accessibility.
You can add icons or just using icons by using the icon attribute of the button component and removing the internat text (for just icons).
For disabling options, you need to disabled both: <button> and <input type="radio">
Browser support
Detected engine:
Chromium
Webkit
Gecko