Component size, gzipped: 17kb

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

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