⚠️ After March 18, 2024, the FastStore documentation will be migrated to the Developer Portal. For more information, access the official release note.

Radio Field

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

Overview


Import

Import the component from @faststore/ui

import { RadioField } from '@faststore/ui'

Import Styles into your FastStore project

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.


Usage

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

Props

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-radio-field
id*stringID to identify input and corresponding label.
label*stringThe text displayed to identify the input radio.
valuestringThe value to identify the input radio.
namestringIdentify radio in the same group.

Design Tokens

Local tokenDefault value/Global token linked
--fs-radio-field-gapvar(--fs-spacing-1)

Customization

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

data-fs-radio-field