Radio
Radios allow users to select one option from a set.
The
Radio component allows users to select a single option from a set of mutually exclusive choices. Typical use cases include:- Selecting a shipping method (e.g.,
Standard,Express, orNext-day delivery). - Choosing payment options (e.g.,
Credit card,PayPal, orBank transfer). - Selecting product variants or configurations (e.g., size or subscription frequency).
Example
Code
Usage
Import the component
_10import { Radio } from '@faststore/ui'
Import styles
To apply styles, include the following in your stylesheet:
_10@import '@faststore/ui/src/components/atoms/Radio/styles.scss';
For details, see Importing FastStore UI component styles.
Examples
Variants
Checked
Example
Code
Disabled
Example
Code
Checked and Disabled
Example
Code
Design tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-radio-width | 1.25rem |
--fs-radio-height | var(--fs-radio-width) |
--fs-radio-border-width | var(--fs-border-width) |
--fs-radio-border-radius | var(--fs-border-radius-circle) |
--fs-radio-border-color | var(--fs-border-color) |
--fs-radio-border-color-hover | var(--fs-border-color-hover) |
--fs-radio-transition | border var(--fs-transition-timing) var(--fs-transition-function), background-color var(--fs-transition-timing) var(--fs-transition-function), box-shadow var(--fs-transition-timing) var(--fs-transition-function) |
--fs-radio-bkg-color-hover | var(--fs-color-primary-bkg-light) |
--fs-radio-shadow-hover | 0 0 0 var(--fs-radio-border-width) var(--fs-border-color-active) |
Design tokens: Knob
The knob is the inner circle that appears when the radio is checked, providing visual feedback for the selected state.
| Local token | Default value/Global token linked |
|---|---|
--fs-radio-knob-width | var(--fs-spacing-1) |
--fs-radio-knob-height | var(--fs-radio-knob-width) |
--fs-radio-knob-bkg-color | var(--fs-color-body-bkg) |
--fs-radio-knob-disabled-bkg-color | var(--fs-color-neutral-5) |
Design tokens: Checked
Checked radio buttons use a distinct background color to indicate the selected option, ensuring users can easily identify their choice.
| Local token | Default value/Global token linked |
|---|---|
--fs-radio-checked-bkg-color | var(--fs-color-primary-bkg) |
--fs-radio-checked-bkg-color-hover | var(--fs-color-primary-bkg-hover) |
Design tokens: Disabled
Disabled radio buttons use muted colors and reduced contrast to visually communicate that the option is unavailable for interaction.
| Local token | Default value/Global token linked |
|---|---|
--fs-radio-disabled-bkg-color | var(--fs-color-disabled-bkg) |
--fs-radio-disabled-border-width | var(--fs-radio-border-width) |
--fs-radio-disabled-border-color | var(--fs-border-color-disabled) |
--fs-radio-disabled-text-color | var(--fs-color-disabled-text) |
Data attributes
You can target and override
Radio styles using the following data attributes:data-fs-radioProps
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-radio |
Best Practices
✅ Do's
- Provide a Label when using radio input. Descriptive labels help users understand the purpose of a form control.