The purpose of radio buttons is to provide users with a clear and intuitive way to make a single selection from a set of options. They are commonly used in forms, surveys, preference settings or any scenario where users need to make a mutually exclusive choice.
Radio buttons consist of small circular elements often accompanied by descriptive text. When a user selects one radio button, it automatically deselects any previously selected radio buttons within the same group.
Anatomy
The anatomy of a radio button rarely differs. This is the the most common version of a radio button.
- Dot. When selected a dot using color-brand-400 appears
- Border. Always using color-grey-400.
- Label Selected. Label turn font-weight-semibold when in checked state.
- Box Inner Shadow. The radio button always uses shadow-ui-inward.
- Label Not Selected. Label turn font-weight-regular when in unselected state.