Radio Field

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

Overview

Import the component from @faststore/ui

import { RadioField } from '@faststore/ui'

To apply the styles of this component in your FastStore project, import the following into your stylesheet:

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

Follow the instructions in the Importing FastStore UI component styles tutorial.

Faststore

<RadioField label="Faststore" id="faststore" />

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`	The text displayed to identify the input radio.
value	`string`	The value to identify the input radio.
name	`string`	Identify radio in the same group.

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

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

data-fs-radio-field