Input · Radio
Radio
Radio component allows the user to select one option from a relative small set.

When to use

  • Used to select a single state among multiple options.
  • The difference from Select is that all available options in Radio are visible by default, making it easier for users to choose in comparison, so there should not be too many options.

Demos

How to import

Basic Usage

Extra Info

You can use extra to add extra information, which can be any type of ReactNode.
extra >= v0.25.0

Disabled

Advanced Mode

You can set mode='advanced' to allow options be able to unchecked when clicked again.

Mutually Exclusive Set

You can use RadioGroup to create a set of mutually exclusive options.

vertical arrangement

The radio elements in the group can be arranged horizontally or vertically by setting the direction property to the RadioGroup

Button Style

version: >=1.26.0
You can use type='button' to set the button style type radio, and the button type radio supports three sizes.
It should be noted that the button type radio selector does not support auxiliary text (extra) and vertical arrangement (direction='vertical').

Card Style

version: >=1.30.0
You can set type='card' to RadioGroup to achieve card style with background.

Pure Card Style

version: >=1.30.0
You can set type='pureCard' to RadioGroup to achieve a pure card style with background and no radio.

Options Configuration

You can pass an array of options to RadioGroup using options property to create a set.

API Reference

Radio

PROPERTIESInstructionsTypeDefault
addonClassNameclassname of content wrapper
provided after v1.16.0
string
addonIdid of addon node, aria-labelledby refers to this id, if not set, it will generate an id randomly
provided after v2.11.0
string
addonStyleinline style of content wrapper
provided after v1.16.0
object
aria-labelLabel of Radiostring-
nameThe name attribute passed to input[type="radio"] in the Radio component, Radios with the same name belong to the same RadioGroup,The name attribute can refer to MDN Radiostring-
autoFocusAutomatically focus the form control when the page is loadedbooleanfalse
checkedSpecify whether it is currently selectedbooleanfalse
typeSet the type of radio, one of default, button, card, pureCard
This api is provided after v2.18.0
stringdefault
classNameClass namestring
defaultCheckedChecked by defaultbooleanfalse
disabledDisable the radiobooleanfalse
extraExtra information displayed
provided after v0.25.0
ReactNode-
extraIdid of extra node. aria-describedby refers to this id, if not set, it will randomly generate an id
provided after v2.11.0
ReactNode-
modeIn advanced mode, options can be clicked to uncheck, one of advancedstring-
preventScrollIndicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the userboolean
styleInline styleCSSProperties
valueCompared based on value to determine whether the option is selectedstring | number-
onChangeCallback function when the selected option changesFunction (e: Event)-
onMouseEnterThe callback function when the mouse moves into the optionfunction(e:Event)-
onMouseLeaveThe callback function when the mouse moves out the optionfunction(e:Event)-

RadioGroup

PROPERTIESInstructionsTypeDefault
aria-labelLabel of RadioGroupstring-
buttonSizeThe size of the button type radio, one of smallmiddlelarge
Provided after v1.26.0
stringmiddle
classNameClass namestring
defaultValueOptions selected by defaultstring | number-
directionArrangement direction of Radio, optional 'horizontal' / 'vertical',
provided after v0.31.0
string'horizontal'
disabledDisable the entire groupbooleanfalse
modeIn advanced mode, options can be clicked to uncheck, one of advanced
provided after v1.9.0
string-
nameThe name attribute for all input[type="radio"] in RadioGroupstring-
optionsSet child options through configurationArray-
styleInline styleCSSProperties
valueUsed to set the currently selected valuestring | number-
typeSet the type of radio, one of default, button, card, pureCard
This api is provided after v1.26.0, and card and pureCard are in v1.30.0 Provided after
stringdefault
onChangeCallback function when the selected option changesFunction (e: Event)-

Methods

Radio

NameDescription
blur()Remove focus
focus()Get focus

Accessibility

ARIA

  • aria-label: used to explain the role of Radio or RadioGroup
  • aria-labelledby points to the addon node, used to explain the content of Radio
  • aria-describedby points to the extra node, which is used to explain the content of Radio

Keyboard and focus

  • RadioGroup can be focused, the initial focus acquisition rules are as follows:
    • When there is no selected item in the RadioGroup, the initial focus is on the first Radio item;
    • When there are selected items in the RadioGroup, the initial focus is on the selected Radio item.
  • For radios belonging to the same radiogroup:
    • You can use Right arrow or Down arrow to move the focus to the next Radio item, uncheck the previously focused Radio item, and select the currently focused Radio item;
    • You can Use Left Arrow or Up Arrow to move the focus to the previous Radio item, at the same time uncheck the previously focused Radio item, and select the currently focused Radio item.
  • If there is no item selected in the RadioGroup, you can use the Space key to select the initial focus.

Content Guidelines

  • Capitalize the first letter
  • No punctuation

Design Tokens