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

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

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

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