Radio Group

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

Overview

Import

Import the component from @faststore/ui

import { 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:

@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

First option

Second option

Third option

<RadioGroup name="usage-radiogroup">
  <RadioField
    label="First option"
    name="usage-radiogroup"
    id="usage-radiofield-first"
  />
  <RadioField
    label="Second option"
    name="usage-radiogroup"
    id="usage-radiofield-second"
  />
  <RadioField
    label="Third option"
    name="usage-radiogroup"
    id="usage-radiofield-third"
  />
</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

Radio Field Rating