Radio

A radio button is an interactive element that allows users to select one option from a predefined set of mutually exclusive choices. Unlike checkboxes, radio buttons are designed for single selection within a group, ensuring that only one option can be chosen at a time.

They typically appear as small circles that can be filled (selected) or empty (deselected). Radio buttons are ideal for scenarios where a user must choose one option from a list, such as selecting a payment method or answering a multiple-choice question.

Their clear and straightforward design helps users make decisions quickly and accurately, enhancing the overall user experience.

Basic

Figma

🧪 Beta

Guidelines

🛠 In progress

Web

🔭 Alpha

Mobile

🔭 Alpha

Guidelines

Correct / Incorrect

Takeaways

Features

Usage

Implementation

Option 1

<script lang="ts">
  import { Radio } from '@behavy/glowup-design-system';

  let selected_list = '';
</script>

<Radio label="Option 1" value="option1" {selected_list} />

Properties

Status	Name	Type	Default	Required	Description
🔭	name	string	’radio’	❌	The name of the radio.
🔭	value	string		✅	The value of the radio.
🔭	label	string		❌	The label of the radio.
🔭	selected_list	string		✅	The list of the selected radio.
🔭	disabled	boolean	false	❌	Disables the radio.

Examples

Alternative

Toggle Use a toggle to switch between two states.

Checkbox Use a checkbox to select multiple options from a list.

Select Use a select component to choose an option from a list.

Card

Figma

🧪 Beta

Guidelines

🛠 In progress

Web

🔭 Alpha

Mobile

🔭 Alpha

Guidelines

Correct / Incorrect

Takeaways

Features

Usage

Implementation

<script lang="ts">
  import { RadioCard } from '@behavy/glowup-design-system';

  let selected_list = '';
</script>

<RadioCard label="Option 1" value="option1" {selected_list} />

Properties

Status	Name	Type	Default	Required	Description
🔭	name	string	’radio’	❌	The name of the radio.
🔭	value	string		✅	The value of the radio.
🔭	label	string		✅	The label of the radio.
🔭	selected_list	string		✅	The list of the selected radio.
🔭	disabled	boolean	false	❌	Disables the radio.
🔭	icon	string		❌	The icon of the radio.
🔭	variant	boolean	false	❌	The variant of the radio.

Examples

Alternative

Toggle card Use a toggle card to switch between two states.

Checkbox card Use a checkbox card to select multiple options from a list.

Select Use a select component to choose an option from a list.