Component size, gzipped: 18kb

Radio

API

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

When to use

  • When the user should see all available options.

Examples

Basic usage

This is a radio description, it gives a little more in-yo-face context about what this is.

Disabled radios

Horizontal alignment

Error state

Overrides usage

Stateful (uncontrolled) usage

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

API

Radio props

NameTypeDescription
align
How to position radio buttons in the group.
aria-label
string
Sets aria-label attribute.
aria-labelledby
string
Sets aria-labelledby attribute.
autoFocus
Set to be focused (active) on selectedchecked radio.
children
Radios within the RadioGroup
disabled
Disabled all radio group from being changed. To disable some of radios provide disabled flag in each of them.
error
Sets radio group into error state.
name
String value for the name of RadioGroup, it is used to group buttons. If missed default is random ID string.
onBlur
Called the onBlur event triggers.
onChange
Handler for change events on trigger element.
onFocus
Called the onFocus event triggers.
onMouseEnter
Called when mouseEnter triggers.
onMouseLeave
Called when mouseLeave triggers.
overrides
Lets you customize all aspects of the component.
required
Set if the control is required to be checked.
value
Passed to the input element value attribute

Radio exports

You can import this module like so:

import {StatefulRadioGroup} from 'baseui/radio'

It exports the following components or utility functions: