[?] Component size, gzipped: 25kb

Radio

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

First

Second

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

Third

Disabled radios

Checked

Unchecked

Horizontal alignment

First

Second

Third

Error state

First

Second

Third

Overrides usage

Custom label for value: 1

Custom label for value: 2

Custom label for value: 3

Stateful (uncontrolled) usage

First

Second

Third

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

Overrides

Additionally, you can fully customize any part of the Radio through the overrides prop. The Radio consists of multiple subcomponents that are listed bellow and you can override each one of them. To help you identify the names of these subcomponents, you can highlight them through this selector:

First

Second

Third

Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!

API

Radio API

`autoFocus` `boolean` `= false`

Focus the radio on initial render.

`checked` `boolean` `= false`

Check or uncheck the control.

`children` `React$Node`

Label of radio.

React$Node

`description` `string`

Add more detail about a radio element.

`disabled` `boolean` `= false`

Disable the checkbox from being changed.

`inputRef` `ElementRef<*>` `= ()`

Used to get a ref to the input element. Useful for programmatically focusing the input

ElementRef*

`isError` `boolean` `= false`

Renders checkbox in errored state.

`labelPlacement` `union`

How to position the label relative to the checkbox itself.

One of "top", 
"right", 
"bottom", 
"left"

`name` `string`

Passed to the input element name attribute

`onBlur` `function` `= () => undefined`

handler for blur events on trigger element.

SyntheticInputEventHTMLInputElement => mixed

`onChange` `function` `= () => undefined`

Handler for change events on trigger element.

SyntheticInputEventHTMLInputElement => mixed

`onFocus` `function` `= () => undefined`

handler for focus events on trigger element.

SyntheticInputEventHTMLInputElement => mixed

`onMouseEnter` `function` `= () => undefined`

Handler for mouseenter events on trigger element.

SyntheticInputEventHTMLInputElement => mixed

`onMouseLeave` `function` `= () => undefined`

Handler for mouseleave events on trigger element.

SyntheticInputEventHTMLInputElement => mixed

`onMouseDown` `function` `= () => undefined`

Handler for mousedown events on trigger element.

SyntheticInputEventHTMLInputElement => mixed

`onMouseUp` `function` `= () => undefined`

Handler for mouseup events on trigger element.

SyntheticInputEventHTMLInputElement => mixed

`overrides` `object` `= {}`

RadioMarkInner  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
RadioMarkOuter  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Label  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Root  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Input  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Description  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
RadioGroupRoot  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*

`required` `boolean`

Marks the checkbox as required.

`value` `string`

Passed to the input element value attribute

RadioGroup API

`"aria-label"` `string`

Used to define a string that labels the radio group. Use this prop if the label is not visible on screen. If the label is visible, use the 'aria-labeledby' prop instead.

`"aria-labelledby"` `string`

Establishes a relationship between the radio group and its label. Screen readers use this attribute to catalog the object on a page so that users can navigate between them.

`overrides` `object` `= {}`

This prop will be deprecated in the next major update. Pass overrides to the 'Radio' component instead.

RadioMarkInner  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
RadioMarkOuter  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Label  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Root  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Input  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Description  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
RadioGroupRoot  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*

`children` `Array<Node>`

As children in React native approach represents radio buttons inside of Radio Group. Can use Radio from this package.

ArrayNode

`value` `string` `= ""`

The value of radio button, which is preselected.

`disabled` `boolean` `= false`

Disabled all radio group from being changed. To disable some of radios provide disabled flag in each of them.

`required` `boolean` `= false`

Set if the control is required to be checked.

`isError` `boolean` `= false`

Sets radio group into error state.

`autoFocus` `boolean` `= false`

Set to be focused (active) on selected\checked radio.

`align` `string` `= "vertical"`

How to position radio buttons in the group.

`name` `string` `= ""`

String value for the name of RadioGroup, it is used to group buttons. If missed default is random ID string.

`labelPlacement` `union` `= "right"`

How to position the label relative to the radio itself.

One of "top", 
"right", 
"bottom", 
"left"

`onChange` `function` `= () => undefined`

Handler for change events on trigger element.

SyntheticInputEventHTMLInputElement => mixed

`onMouseEnter` `function` `= () => undefined`

Handler for mouseenter events on trigger element.

SyntheticInputEventHTMLInputElement => mixed

`onMouseLeave` `function` `= () => undefined`

Handler for mouseleave events on trigger element.

SyntheticInputEventHTMLInputElement => mixed

`onFocus` `function` `= () => undefined`

Handler for focus events on trigger element.

SyntheticInputEventHTMLInputElement => mixed

`onBlur` `function` `= () => undefined`

Handler for blur events on trigger element.

SyntheticInputEventHTMLInputElement => mixed

StatefulRadioGroup API

`overrides` `object`

RadioMarkInner  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
RadioMarkOuter  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Label  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Root  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Input  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Description  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
RadioGroupRoot  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*

`children` `Array<Node>`

A list of Radio components.

ArrayNode

`initialState` `object`

Initial state populated into the component

value string

`autoFocus` `boolean`

Set to be focused (active) on selected\checked radio.

`onChange` `function`

Handler for change events on trigger element.

SyntheticInputEventHTMLInputElement => mixed

StatefulRadioGroupContainer API

`overrides` `object`

RadioMarkInner  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
RadioMarkOuter  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Label  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Root  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Input  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Description  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
RadioGroupRoot  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*

`children` `function`

Should return RadioGroup instance with standard or customized inner elements.

"aria-label" string 
"aria-labelledby" string 
overrides  RadioMarkInner  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
RadioMarkOuter  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Label  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Root  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Input  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Description  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
RadioGroupRoot  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
children  ArrayNode
value string 
disabled boolean 
required boolean 
isError boolean 
autoFocus boolean 
align string 
name string 
labelPlacement  One of "top", 
"right", 
"bottom", 
"left"
onChange function SyntheticInputEventHTMLInputElement => mixed
onMouseEnter function SyntheticInputEventHTMLInputElement => mixed
onMouseLeave function SyntheticInputEventHTMLInputElement => mixed
onFocus function SyntheticInputEventHTMLInputElement => mixed
onBlur function SyntheticInputEventHTMLInputElement => mixed
 => Node

`initialState` `object` `= { value: "" }`

Initial state populated into the component

value string

`stateReducer` `function` `= (type, nextState) => undefined`

Reducer function to manipulate internal state updates.

function string, 
value string 
, 
value string 
, 
SyntheticInputEventHTMLInputElement
 => value string

`onChange` `function` `= () => undefined`

Handler for change events on trigger element.

SyntheticInputEventHTMLInputElement => mixed

`autoFocus` `boolean`

Set to be focused (active) on selected\checked radio.

Radio exports

You can import this module like so:

import {StatefulRadioGroup} from 'baseui/radio'

It exports the following components or utility functions:

StatefulRadioGroup
StatefulContainer
RadioGroup
StyledRoot
StyledLabel
StyledInput
StyledDescription
StyledRadioMarkInner
StyledRadioMarkOuter
StyledRadioGroupRoot
Radio

Radio

When to use

Examples

Basic usage

Disabled radios

Horizontal alignment

Error state

Overrides usage

Stateful (uncontrolled) usage

Overrides

API

Radio API

.css-j5qqua{background:#DEEBFF;color:#0747A6;border-radius:3px;display:inline-block;margin-right:0.8em;padding:0 0.2em;}autoFocus .css-fp46og{background:#F4F5F7;border-radius:3px;color:#5E6C84;display:inline-block;padding:0 0.2em;}boolean.css-1quwbx4{color:#5E6C84;} = false

checked boolean = false

children React$Node

description string

disabled boolean = false

inputRef ElementRef<*> = ()

isError boolean = false

labelPlacement union

name string

onBlur function = () => undefined

onChange function = () => undefined

onFocus function = () => undefined

onMouseEnter function = () => undefined

onMouseLeave function = () => undefined

onMouseDown function = () => undefined

onMouseUp function = () => undefined

overrides object = {}

required boolean

value string

RadioGroup API

.css-j5qqua{background:#DEEBFF;color:#0747A6;border-radius:3px;display:inline-block;margin-right:0.8em;padding:0 0.2em;}"aria-label" .css-fp46og{background:#F4F5F7;border-radius:3px;color:#5E6C84;display:inline-block;padding:0 0.2em;}string

"aria-labelledby" string

overrides object.css-1quwbx4{color:#5E6C84;} = {}

children Array<Node>

value string = ""

disabled boolean = false

required boolean = false

isError boolean = false

autoFocus boolean = false

align string = "vertical"

name string = ""

labelPlacement union = "right"

onChange function = () => undefined

onMouseEnter function = () => undefined

onMouseLeave function = () => undefined

onFocus function = () => undefined

onBlur function = () => undefined

StatefulRadioGroup API

.css-j5qqua{background:#DEEBFF;color:#0747A6;border-radius:3px;display:inline-block;margin-right:0.8em;padding:0 0.2em;}overrides .css-fp46og{background:#F4F5F7;border-radius:3px;color:#5E6C84;display:inline-block;padding:0 0.2em;}object

children Array<Node>

initialState object

autoFocus boolean

onChange function

StatefulRadioGroupContainer API

.css-j5qqua{background:#DEEBFF;color:#0747A6;border-radius:3px;display:inline-block;margin-right:0.8em;padding:0 0.2em;}overrides .css-fp46og{background:#F4F5F7;border-radius:3px;color:#5E6C84;display:inline-block;padding:0 0.2em;}object

children function

initialState object.css-1quwbx4{color:#5E6C84;} = { value: "" }

stateReducer function = (type, nextState) => undefined

onChange function = () => undefined

autoFocus boolean

Radio exports

`autoFocus` `boolean` `= false`

`checked` `boolean` `= false`

`children` `React$Node`

`description` `string`

`disabled` `boolean` `= false`

`inputRef` `ElementRef<*>` `= ()`

`isError` `boolean` `= false`

`labelPlacement` `union`

`name` `string`

`onBlur` `function` `= () => undefined`

`onChange` `function` `= () => undefined`

`onFocus` `function` `= () => undefined`

`onMouseEnter` `function` `= () => undefined`

`onMouseLeave` `function` `= () => undefined`

`onMouseDown` `function` `= () => undefined`

`onMouseUp` `function` `= () => undefined`

`overrides` `object` `= {}`

`required` `boolean`

`value` `string`

`"aria-label"` `string`

`"aria-labelledby"` `string`

`overrides` `object` `= {}`

`children` `Array<Node>`

`value` `string` `= ""`

`disabled` `boolean` `= false`

`required` `boolean` `= false`

`isError` `boolean` `= false`

`autoFocus` `boolean` `= false`

`align` `string` `= "vertical"`

`name` `string` `= ""`

`labelPlacement` `union` `= "right"`

`onChange` `function` `= () => undefined`

`onMouseEnter` `function` `= () => undefined`

`onMouseLeave` `function` `= () => undefined`

`onFocus` `function` `= () => undefined`

`onBlur` `function` `= () => undefined`

`overrides` `object`

`children` `Array<Node>`

`initialState` `object`

`autoFocus` `boolean`

`onChange` `function`

`overrides` `object`

`children` `function`

`initialState` `object` `= { value: "" }`

`stateReducer` `function` `= (type, nextState) => undefined`

`onChange` `function` `= () => undefined`

`autoFocus` `boolean`