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.

Radio Basic Usage

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

Radio as Stateful RadioGroup

Disabled Radios

Radio with Horizontal Align

Radio in Error State

Radio with Overrides

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:

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

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.