Radio

Radios are used when only one choice may be selected in a series of options.

Import

import { Radio, RadioGroup } from 'rsuite';
  • <Radio> A radio button is a checkable input that when associated with other radio buttons, only one of which can be checked at a time.
  • <RadioGroup> Radio Group allow users to select a single option from a list of mutually exclusive options.

Examples

Basic

Disabled and read only

Colors

Radio Group

Radio Group - Inline layout

Radio Group - Picker

Controlled Radio Group

Accessibility

ARIA properties

  • RadioGroup role is radiogroup.
  • Each Radio role is radio.
  • If a Radio is checked, aria-checked is set to true.
  • If a Radio is disabled, aria-disabled is set to true.

Keyboard interaction

  • โ†’ - Move focus to the next radio button. If focus is on the last radio button in the group, move to the first radio button.
  • โ† - Move focus to the previous radio button. If focus is on the first radio button in the group, move to the last radio button.

Props

<Radio>

Property Type (Default) Description
as ElementType(div) Custom element type for the component
checked boolean Specifies whether the radio is selected
color Color The color of the radio when checked
defaultChecked boolean Specifies the initial state: whether or not the radio is selected
disabled boolean The disable of component
inline boolean Inline layout
inputProps object Attributes applied to the input element
inputRef ref Pass a ref to the input element.
name string Name to use for form
onChange (value: string, checked: boolean, event) => void callback function that has been checked for changes in state
value string Value, corresponding to the value of the Radiogroup, to determine whether the

<RadioGroup>

Property Type (Default) Description
appearance 'default' | 'picker' A radio group can have different appearances
defaultValue string Default value
inline boolean Inline layout
name string Name to use for form
onChange (value:string, event) => void Callback function with value changed
value string Value (Controlled)

ts:Color

type Color = 'red' | 'orange' | 'yellow' | 'green' | 'cyan' | 'blue' | 'violet';
Vercel banner