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

Radio as Stateful RadioGroup

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

disabled boolean = false

Disable the checkbox from being changed.

inputRef object = react.createRef()

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

current nullable required HTMLInputElement

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 = {}

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

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.

ariaLabel string

This prop will be deprecated in the next major update. Use 'aria-label' 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.

ariaLabelledBy string

This prop will be deprecated in the next major update. Use 'aria-labelledby' instead.

overrides object = {}

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

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

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"

$theme object

breakpoints required
small number required
medium number required
large number required
colors required
primary50 string required
primary100 string required
primary200 string required
primary300 string required
primary400 string required
primary string required
primary500 string required
primary600 string required
primary700 string required
negative50 string required
negative100 string required
negative200 string required
negative300 string required
negative400 string required
negative string required
negative500 string required
negative600 string required
negative700 string required
warning50 string required
warning100 string required
warning200 string required
warning300 string required
warning400 string required
warning string required
warning500 string required
warning600 string required
warning700 string required
positive50 string required
positive100 string required
positive200 string required
positive300 string required
positive400 string required
positive string required
positive500 string required
positive600 string required
positive700 string required
white string required
mono100 string required
mono200 string required
mono300 string required
mono400 string required
mono500 string required
mono600 string required
mono700 string required
mono800 string required
mono900 string required
mono1000 string required
black string required
rating200 string required
rating400 string required
background string required
backgroundAlt string required
backgroundInv string required
foreground string required
foregroundAlt string required
foregroundInv string required
border string required
borderAlt string required
borderFocus string required
borderError string required
buttonPrimaryFill string required
buttonPrimaryText string required
buttonPrimaryHover string required
buttonPrimaryActive string required
buttonSecondaryFill string required
buttonSecondaryText string required
buttonSecondaryHover string required
buttonSecondaryActive string required
buttonTertiaryFill string required
buttonTertiaryText string required
buttonTertiaryHover string required
buttonTertiaryActive string required
buttonTertiarySelectedText string required
buttonTertiarySelectedFill string required
buttonMinimalFill string required
buttonMinimalText string required
buttonMinimalHover string required
buttonMinimalActive string required
buttonDisabledFill string required
buttonDisabledText string required
breadcrumbsText string required
breadcrumbsSeparatorFill string required
fileUploaderBackgroundColor string required
fileUploaderBackgroundColorActive string required
fileUploaderBorderColorActive string required
fileUploaderBorderColorDefault string required
fileUploaderMessageColor string required
linkText string required
linkVisited string required
linkHover string required
listHeaderFill string required
listBodyFill string required
listIconFill string required
listBorder string required
tickFill string required
tickFillHover string required
tickFillActive string required
tickFillSelected string required
tickFillSelectedHover string required
tickFillSelectedHoverActive string required
tickFillDisabled string required
tickBorder string required
tickMarkFill string required
sliderTrackFill string required
sliderTrackFillHover string required
sliderTrackFillActive string required
sliderTrackFillSelected string required
sliderTrackFillSelectedHover string required
sliderTrackFillSelectedActive string required
sliderTrackFillDisabled string required
sliderHandleFill string required
sliderHandleFillHover string required
sliderHandleFillActive string required
sliderHandleFillSelected string required
sliderHandleFillSelectedHover string required
sliderHandleFillSelectedActive string required
sliderHandleFillDisabled string required
sliderBorder string required
sliderBorderHover string required
sliderBorderDisabled string required
inputFill string required
inputFillError string required
inputFillDisabled string required
inputTextDisabled string required
notificationPrimaryBackground string required
notificationPrimaryText string required
notificationPositiveBackground string required
notificationPositiveText string required
notificationWarningBackground string required
notificationWarningText string required
notificationNegativeBackground string required
notificationNegativeText string required
menuFillHover string required
menuFontDefault string required
menuFontDisabled string required
menuFontHighlighted string required
menuFontSelected string required
shadowFocus string required
shadowError string required
tagBackground string required
tagNeutralBackground string required
tagPrimaryBackground string required
tagPositiveBackground string required
tagWarningBackground string required
tagNegativeBackground string required
tagRGBGradient string required
tagRGBGradientSecondary string required
tableHeadBackgroundColor string required
toastText string required
toastPrimaryBackground string required
toastPositiveBackground string required
toastWarningBackground string required
toastNegativeBackground string required
typography required
font100 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font200 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font250 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font300 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font350 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font400 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font450 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font500 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font600 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font700 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font800 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font900 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font1000 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
sizing required
scale0 string required
scale100 string required
scale200 string required
scale300 string required
scale400 string required
scale500 string required
scale600 string required
scale700 string required
scale800 string required
scale900 string required
scale1000 string required
scale1200 string required
scale1400 string required
scale1600 string required
scale2400 string required
scale3200 string required
scale4800 string required
lighting required
shadow400 string required
shadow500 string required
shadow600 string required
shadow700 string required
overlay0 string required
overlay100 string required
overlay200 string required
overlay300 string required
overlay400 string required
overlay500 string required
overlay600 string required
animation required
timing100 string required
timing400 string required
timing700 string required
easeOutCurve string required
easeInCurve string required
easeInOutCurve string required
borders required
border100 required
borderColor string required
borderStyle string required
borderWidth string required
border200 required
borderColor string required
borderStyle string required
borderWidth string required
border300 required
borderColor string required
borderStyle string required
borderWidth string required
border400 required
borderColor string required
borderStyle string required
borderWidth string required
border500 required
borderColor string required
borderStyle string required
borderWidth string required
border600 required
borderColor string required
borderStyle string required
borderWidth string required
useRoundedCorners boolean required
radius100 string required
radius200 string required
radius300 string required
zIndex required
modal number required

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

StatefulRadioGroupContainer API

overrides object

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

children function

Should return RadioGroup instance with standard or customized inner elements.

"aria-label" string
ariaLabel string
"aria-labelledby" string
ariaLabelledBy string
overrides
RadioMark { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*
RadioMarkInner { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*
RadioMarkOuter { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*
Label { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*
Root { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*
Input { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*
RadioGroupRoot { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*
children ArrayNode
value string
disabled boolean
required boolean
isError boolean
autoFocus boolean
align string
name string
labelPlacement One of
"top",
"right",
"bottom",
"left"
$theme
breakpoints required
small number required
medium number required
large number required
colors required
primary50 string required
primary100 string required
primary200 string required
primary300 string required
primary400 string required
primary string required
primary500 string required
primary600 string required
primary700 string required
negative50 string required
negative100 string required
negative200 string required
negative300 string required
negative400 string required
negative string required
negative500 string required
negative600 string required
negative700 string required
warning50 string required
warning100 string required
warning200 string required
warning300 string required
warning400 string required
warning string required
warning500 string required
warning600 string required
warning700 string required
positive50 string required
positive100 string required
positive200 string required
positive300 string required
positive400 string required
positive string required
positive500 string required
positive600 string required
positive700 string required
white string required
mono100 string required
mono200 string required
mono300 string required
mono400 string required
mono500 string required
mono600 string required
mono700 string required
mono800 string required
mono900 string required
mono1000 string required
black string required
rating200 string required
rating400 string required
background string required
backgroundAlt string required
backgroundInv string required
foreground string required
foregroundAlt string required
foregroundInv string required
border string required
borderAlt string required
borderFocus string required
borderError string required
buttonPrimaryFill string required
buttonPrimaryText string required
buttonPrimaryHover string required
buttonPrimaryActive string required
buttonSecondaryFill string required
buttonSecondaryText string required
buttonSecondaryHover string required
buttonSecondaryActive string required
buttonTertiaryFill string required
buttonTertiaryText string required
buttonTertiaryHover string required
buttonTertiaryActive string required
buttonTertiarySelectedText string required
buttonTertiarySelectedFill string required
buttonMinimalFill string required
buttonMinimalText string required
buttonMinimalHover string required
buttonMinimalActive string required
buttonDisabledFill string required
buttonDisabledText string required
breadcrumbsText string required
breadcrumbsSeparatorFill string required
fileUploaderBackgroundColor string required
fileUploaderBackgroundColorActive string required
fileUploaderBorderColorActive string required
fileUploaderBorderColorDefault string required
fileUploaderMessageColor string required
linkText string required
linkVisited string required
linkHover string required
listHeaderFill string required
listBodyFill string required
listIconFill string required
listBorder string required
tickFill string required
tickFillHover string required
tickFillActive string required
tickFillSelected string required
tickFillSelectedHover string required
tickFillSelectedHoverActive string required
tickFillDisabled string required
tickBorder string required
tickMarkFill string required
sliderTrackFill string required
sliderTrackFillHover string required
sliderTrackFillActive string required
sliderTrackFillSelected string required
sliderTrackFillSelectedHover string required
sliderTrackFillSelectedActive string required
sliderTrackFillDisabled string required
sliderHandleFill string required
sliderHandleFillHover string required
sliderHandleFillActive string required
sliderHandleFillSelected string required
sliderHandleFillSelectedHover string required
sliderHandleFillSelectedActive string required
sliderHandleFillDisabled string required
sliderBorder string required
sliderBorderHover string required
sliderBorderDisabled string required
inputFill string required
inputFillError string required
inputFillDisabled string required
inputTextDisabled string required
notificationPrimaryBackground string required
notificationPrimaryText string required
notificationPositiveBackground string required
notificationPositiveText string required
notificationWarningBackground string required
notificationWarningText string required
notificationNegativeBackground string required
notificationNegativeText string required
menuFillHover string required
menuFontDefault string required
menuFontDisabled string required
menuFontHighlighted string required
menuFontSelected string required
shadowFocus string required
shadowError string required
tagBackground string required
tagNeutralBackground string required
tagPrimaryBackground string required
tagPositiveBackground string required
tagWarningBackground string required
tagNegativeBackground string required
tagRGBGradient string required
tagRGBGradientSecondary string required
tableHeadBackgroundColor string required
toastText string required
toastPrimaryBackground string required
toastPositiveBackground string required
toastWarningBackground string required
toastNegativeBackground string required
typography required
font100 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font200 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font250 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font300 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font350 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font400 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font450 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font500 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font600 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font700 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font800 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font900 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font1000 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
sizing required
scale0 string required
scale100 string required
scale200 string required
scale300 string required
scale400 string required
scale500 string required
scale600 string required
scale700 string required
scale800 string required
scale900 string required
scale1000 string required
scale1200 string required
scale1400 string required
scale1600 string required
scale2400 string required
scale3200 string required
scale4800 string required
lighting required
shadow400 string required
shadow500 string required
shadow600 string required
shadow700 string required
overlay0 string required
overlay100 string required
overlay200 string required
overlay300 string required
overlay400 string required
overlay500 string required
overlay600 string required
animation required
timing100 string required
timing400 string required
timing700 string required
easeOutCurve string required
easeInCurve string required
easeInOutCurve string required
borders required
border100 required
borderColor string required
borderStyle string required
borderWidth string required
border200 required
borderColor string required
borderStyle string required
borderWidth string required
border300 required
borderColor string required
borderStyle string required
borderWidth string required
border400 required
borderColor string required
borderStyle string required
borderWidth string required
border500 required
borderColor string required
borderStyle string required
borderWidth string required
border600 required
borderColor string required
borderStyle string required
borderWidth string required
useRoundedCorners boolean required
radius100 string required
radius200 string required
radius300 string required
zIndex required
modal number required
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.