- Home
- Design system
- Elements
- Radio
Radio
Options
Basic usage
Using <div> elements
As an alternative to using a <label> html element as the container - you may also use a <div>, with the <label> element inside it. The previous examples are the preferred structure for semantic reasons, but they will work with the syntax shown below.
Visual states
Colors
Icons
Add an additional class such as --icon-online from the available icon modifier list.
Size
Small, medium, large
Hiding the label
By default a checkbox shows the label text (the contents inside the div). This can be hidden using the --hide-label option. For accessibility purposes it’s preferable to have a descriptive label hidden using this method, rather than omitting the label text.
Styles
Custom styles exist for specific use cases.
Dots
Panel
Default
The default panel style will highlight the panel when selected.
Simple
Panel simple does not use a border or background highlight color when selected.
Swatches
Swatches is a style used to select color options.
Square
Tags
This option is available using ds-tags which has additional features.
Tests
Default style variations
Default style with multiple options and additional content
Default style with ds-cols content
Panel style variations
Panel style with multiple options
Panel style with multiple options and additional content
Panel style with horizontal layout
To have a horizontal set of panels, place them inside a .ds-cols container.