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.Overview
Example
Code
Import
Import the component from @faststore/ui
_10import { 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:
_10@import '@faststore/ui/src/components/atoms/Radio/styles.scss'
_10@import '@faststore/ui/src/components/molecules/RadioField/styles.scss';
Follow the instructions in the Importing FastStore UI component styles tutorial.
Usage
_10<RadioField label="Faststore" id="faststore" />
Props
| 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. |
Design Tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-radio-field-gap | var(--fs-spacing-1) |
Customization
For further customization, you can use the following data attributes:
data-fs-radio-field