Documentation
Feedback
Guides
Storefront Development

Storefront Development
Radio

Radios allow users to select one option from a set.

Overview

Example
Code

Import

Import the component from @faststore/ui

_10
import { Radio } from '@faststore/ui'

Import Styles

_10
import '@faststore/ui/src/components/atoms/Radio/styles.scss'


Usage


_10
<Radio />


Props

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-radio

Design Tokens

Local tokenDefault value/Global token linked
--fs-radio-width1.25rem
--fs-radio-heightvar(--fs-radio-width)
--fs-radio-border-widthvar(--fs-border-width)
--fs-radio-border-radiusvar(--fs-border-radius-circle)
--fs-radio-border-color
var(--fs-border-color)
--fs-radio-border-color-hover
var(--fs-border-color-hover)
--fs-radio-transitionborder 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-hover0 0 0 var(--fs-radio-border-width) var(--fs-border-color-active)

Nested Elements

Knob

Local tokenDefault value/Global token linked
--fs-radio-knob-widthvar(--fs-spacing-1)
--fs-radio-knob-heightvar(--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)

Variants

Checked


_10
<Radio checked />

Local tokenDefault 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)

Disabled


_10
<Radio checked disabled />

Local tokenDefault value/Global token linked
--fs-radio-disabled-bkg-color
var(--fs-color-disabled-bkg)
--fs-radio-disabled-border-widthvar(--fs-radio-border-width)
--fs-radio-disabled-border-color
var(--fs-border-color-disabled)
--fs-radio-disabled-text-color
var(--fs-color-disabled-text)

Customization

For further customization, you can use the following data attributes:
data-fs-radio

Best Practices

✅ Do's

  • Provide a Label when using radio input. Descriptive labels help users understand the purpose of a form control.

  • RadioField

    RadioField wraps a Radio input and its corresponding Label.

    See more
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page