Radio button
Radio button is one of the selection controls that lets users select one item from a list.
1. Anatomy
Value | Purpose |
role= “radiogroup” | Identify the container for radio buttons. |
aria-checked | The state of the radio button. |
aria-labelledby= “label” | The name of the radio button group. |
tabindex = “0” | Include the component into the tab structure. |
2. Configurations
2.1 Size
Radio buttons support 2 sizes: large, and medium/small. Use medium/small as default.
2.2 Field label
Field label property can be horizontal, or vertical.
2.3 Helper text
Helper text sits below the label. Use helper-text to add text.
2.4 Subtext
Radio buttons support sub-text.
2.5 Error message
Error message is a boolean value. It is commonly used when the field is required. It appears below the label and above the helper text.
2.6 Required
Required is a boolean value. A required field can not procees without a valid user input.
3. Behavior
3.1 Clickable area
Users should be able to select and unselect a radio button by clicking on the radio or label.
3.2 Selection
Once users select one of the choices, they CANNOT empty the selection. They can only change their choice.
4. States
Radio button has 2 selection states: un-checked, checked. Each selection state has its own interaction states: default, focus, error, disabled, hover and pressed.
7. Resilience and responsiveness
7.1 Minimum width
There is a minimum width of radio button of 112px. Once parent container shrinks below the width, the radio button stops to shrink.
7.2 Text wrapping
Text expands as much as it can within the confines of the parent container and then starts wrapping to the next line.
7.3 Field-label-box width (horizontal alignment only)
The horizontally-aligned radio buttons group sits in a 12-columns grid system. The parent container is divided into 12 columns with a gap of 4px.
Customize the field label’s width by setting the number of columns of the label-box.
There is a minimum width of 112px set on the radio buttons (excludind the lables) and if the parent’s container is not sufficient, the content will overflow.
