Radio

Radios allow users to select one option from a set.

Overview

Import the component from @faststore/ui

import { Radio } from '@faststore/ui'

Import Styles

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

<Radio />

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-radio`

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)`

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)`

<Radio checked />

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)`

<Radio checked disabled />

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)`

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

data-fs-radio

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

RadioField
RadioField
RadioField wraps a Radio input and its corresponding Label.
See more