Radio

A radio button is an interactive element that allows users to select a single option from a predefined set of choices.

Overview

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.

A group of radios that are vertically stacked together.

Resources

Figma Component	Available
Figma Documentation	Available
Web Components	Planned
Vue [Fozzie]	Available
React [Snacks]	Available
iOS JustUI [UI Kit]	Available
iOS PIE [SwiftUI]	Available
Android [XML views]	Available
Android [Jetpack compose]	Available