Base Web - Radio

One

Two

This is a radio description

Three

value

onChange

e => setValue(e.currentTarget.value)

e => setValue(e.currentTarget.value)

children

<Radio value="1">One</Radio>
<Radio
  value="2"
  description="This is a radio description"
>
  Two
</Radio>
<Radio value="3">
  Three
</Radio>

<Radio value="1">One</Radio>
<Radio
  value="2"
  description="This is a radio description"
>
  Two
</Radio>
<Radio value="3">
  Three
</Radio>

name

align

vertical

horizontal

disabled

error

import * as React from "react";
import { RadioGroup, Radio, ALIGN } from "baseui/radio";

export default () => {
  const [value, setValue] = React.useState("2");
  return (
    <RadioGroup
      value={value}
      onChange={e => setValue(e.currentTarget.value)}
      name="number"
      align={ALIGN.vertical}
    >
      <Radio value="1">One</Radio>
      <Radio
        value="2"
        description="This is a radio description"
      >
        Two
      </Radio>
      <Radio value="3">Three</Radio>
    </RadioGroup>
  );
}

import * as React from "react";
import { RadioGroup, Radio, ALIGN } from "baseui/radio";
export default () => {
  const [value, setValue] = React.useState("2");
  return (
    <RadioGroup
      value={value}
      onChange={e => setValue(e.currentTarget.value)}
      name="number"
      align={ALIGN.vertical}
    >
      <Radio value="1">One</Radio>
      <Radio
        value="2"
        description="This is a radio description"
      >
        Two
      </Radio>
      <Radio value="3">Three</Radio>
    </RadioGroup>
  );
}

API

When to use

Examples

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

API

Radio props

Name	Type	Description
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
containsInteractiveElement	boolean	Indicates the radio contains an interactive element, and the default label behavior should be prevented for child elements.
disabled	boolean	Disabled all radio group from being changed. To disable some of radios provide disabled flag in each of them.
error	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

When to use

Examples

Basic usage

Disabled radios

Horizontal alignment

Error state

Overrides usage

Stateful (uncontrolled) usage

API

Radio props

Radio exports