RadioField

Groups a Radio input and its corresponding Label.

The RadioField wraps a Radio input and its corresponding Label. It allows users to select one option from a set.

Example

Code

Default

Checked

Disabled

Checked & Disabled

Usage


_10import { RadioField } from '@faststore/ui'

To apply styles, include the following in your stylesheet:


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


_10@import '@faststore/ui/src/components/molecules/RadioField/styles.scss';

Local token	Default value/Global token linked
`--fs-radio-field-gap`	`var(--fs-spacing-1)`

You can target and override RadioField styles using the following data attributes:

data-fs-radio-field

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-radio-field`
id*	`string`	ID to identify input and corresponding label.
label*	`string \| number \| false \| true \| {} \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`	The text or component displayed to identify the input radio.
value	`string`	The value to identify the input radio.
name	`string`	Identify radio in the same group.