Radio Group

FastStore UI components Molecules

Radio Group

RadioGroup allows users to select a single option from a list of two or more mutually exclusive options.

Radio Group allows users to select a single option from a list of two or more mutually exclusive options.

Overview

Example

Code

First option

Second option

Third option

Import

Import the component from @faststore/ui


_10import { RadioGroup, 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

First option

Second option

Third option


_17<RadioGroup name="usage-radiogroup">
_17  <RadioField
_17    label="First option"
_17    name="usage-radiogroup"
_17    id="usage-radiofield-first"
_17  />
_17  <RadioField
_17    label="Second option"
_17    name="usage-radiogroup"
_17    id="usage-radiofield-second"
_17  />
_17  <RadioField
_17    label="Third option"
_17    name="usage-radiogroup"
_17    id="usage-radiofield-third"
_17  />
_17</RadioGroup>

Props

Name	Type	Description
name*	`string`	Name to link children by context.
selectedValue	`string \| number`	Value of checked child.
onChange	`ChangeEventHandler<HTMLInputElement>`	Function that is triggered when any children is checked.

Customization

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

data-fs-radio-group-option