Radio

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

When to use

Checked

Unchecked

First

Second

Third

Custom label for value: 1

Custom label for value: 2

Custom label for value: 3

First

Second

Third

As with many of our components, there is also an uncontrolled version, StatefulRadioGroup, which manages its own state.

Name	Type	Default	Description
align	'horizontal' \| 'vertical'		How to position radio buttons in the group
aria-label	string		Sets aria-label attribute.
aria-labelledby	string		Sets aria-labelledby attribute.
autoFocus	boolean	false	Set to be focused (active) on selectedchecked radio.
children	react node		Radios within the RadioGroup
className	string		Enriched style to be provided to RadioGroupRoot
containsInteractiveElement	boolean	false	Indicates the radio contains an interactive element, and the default label behavior should be prevented for child elements.
disabled	boolean	false	Disabled all radio group from being changed. To disable some of radios provide disabled flag in each of them.
intent	'default' \| 'success' \| 'warning' \| 'error'		Defines the intent of the Radio.
labelPlacement	'top' \| 'bottom' \| 'left' \| 'right'	right	Determines how to position the label relative to the checkbox.
name	string		String value for the name of RadioGroup, it is used to group buttons. If missed default is random ID string.
onChange	function		Handler for change events on trigger element.
overrides	custom		Lets you customize all aspects of the component.
required	boolean	false	Set if the control is required to be checked.
size	'sm' \| 'md' \| 'lg'	md	The size of the component
style	string		Enriched style to be provided to RadioGroupRoot
value	string		Passed to the input element value attribute

You can check the implementation of the component for more details.

You can import this module like so:

import {ALIGN} from 'baseui/radio'

It exports the following components or utility functions: