Documentation
Feedback
Guides
Storefront Development

Storefront Development
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

Import

Import the component from @faststore/ui

_10
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:

_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


_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

NameTypeDescriptionDefault
name*stringName to link children by context.
selectedValuestring | numberValue of checked child.
onChangeChangeEventHandler<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
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page