The Strum logo: two oscillating strings from an instrument next to the word Strum
Skip to content
GitHub

Radio

A set of radio form inputs for single-choice user selection
<RadioGroup>

  <RadioItem label="Clarinet" value="clarinet" />

  <RadioItem label="Guitar" value="guitar" />

  <RadioItem label="Piano" value="piano" />

</RadioGroup>

Props
Link to this heading

<RadioGroup>

import { RadioGroup } from '@strum/react';
name
type
default
error
string
-
label
string
-
onChange
((value: string) => void) & FormEventHandler<HTMLDivElement>
-
ref
Ref<HTMLDivElement>
-
value
string
-

Label
Link to this heading

Radio groups take an optional label prop which will display text to describe the grouping.

<Stack gap="6">

  <RadioGroup label="Your favorite instrument">

    <RadioItem id="label-clarinet" label="Clarinet" value="clarinet" />

    <RadioItem id="label-guitar" label="Guitar" value="guitar" />

    <RadioItem id="label-piano" label="Piano" value="piano" />

  </RadioGroup>

  <RadioGroup label="Your favorite genre">

    <RadioItem id="label-classical" label="Classical" value="classical" />

    <RadioItem id="label-pop" label="Pop" value="pop" />

    <RadioItem id="label-rock" label="Rock" value="rock" />

  </RadioGroup>

</Stack>

Disabled state
Link to this heading

You can disable the entire group:

<RadioGroup disabled>

  <RadioItem id="disabled-group-clarinet" label="Clarinet" value="clarinet" />

  <RadioItem id="disabled-group-guitar" label="Guitar" value="guitar" />

  <RadioItem id="disabled-group-piano" label="Piano" value="piano" />

</RadioGroup>

You can also disable individual radio items:

<RadioGroup>

  <RadioItem id="disabled-clarinet" label="Clarinet" value="clarinet" />

  <RadioItem disabled id="disabled-guitar" label="Guitar" value="guitar" />

  <RadioItem id="disabled-piano" label="Piano" value="piano" />

</RadioGroup>

Error state
Link to this heading

<RadioGroup error="This field is required" required>

  <RadioItem id="error-clarinet" label="Clarinet" value="clarinet" />

  <RadioItem id="error-guitar" label="Guitar" value="guitar" />

  <RadioItem id="error-piano" label="Piano" value="piano" />

</RadioGroup>

Controlled input
Link to this heading

To control your radio group with React, simply include a value boolean prop and a onChange function prop.

<RadioGroup onChange={onChange} value={value}>

  <RadioItem id="controlled-clarinet" label="Clarinet" value="clarinet" />

  <RadioItem id="controlled-guitar" label="Guitar" value="guitar" />

  <RadioItem id="controlled-piano" label="Piano" value="piano" />

</RadioGroup>
Edit on GitHub