RadioButtonThe radio button comes only in one size, and cannot be resized. Size: 24x24

Overview

Usage Examples

States

Property	Preview
Un-Checked
Checked
Disabled - Un-Checked
Disabled - Checked

Accessories

Property	Preview
Label A label can be displayed next to the RadioButton. Use this style when the user needs to select from a fewer variety of choices.

Spec

Size

The checkbox comes only in one size, and cannot be resized.
 Size: 24x24

UX Guidelines

RadioGroupUse the RadioGroup component to group a list of radio options. <Add link>

LayoutWhen creating a settings screen, display controls on the right side only to keep alignment between various controls like toggleSwitch, radioButton and Checkbox. When selection is a part of a flow, displaying controls on the left is more appropriate.

Dev

PlaygroundCode Example

APIThis is the list of additional props for the component

borderRadius

number

The radio button border radius. Default is 24

color

string

The color of the radio button. Default is Colors.$backgroundPrimaryHeavy

containerStyle

ViewStyle

Additional styling for the container

contentOnLeft

boolean

Should the content be rendered left to the button

disabled

boolean

Whether the radio button should be disabled

iconOnRight

boolean

Should the icon be on the right side of the label. Default is false

iconSource

ImageSource

Icon image source

iconStyle

ImageStyle

Icon image style

label

string

A label for the radio button description

labelStyle

TextStyle

Label style

onPress

(selected: boolean) => void

Invoked when pressing the button

selected

boolean

When using RadioButton without a RadioGroup, use this prop to toggle selection

size

number

The size of the radio button, affect both width & height. Default is 24

value

string | number | boolean

The identifier value of the radio button. must be different than other RadioButtons in the same group