Radio

Source

Theme Source

The Radio component is a user interface element that allows the user to select a single option from a list of choices. It is commonly used in forms and surveys.

Import#

Pearl UI provides two components related to radio buttons:

Radio: This is the individual radio button that can be selected by the user.
RadioGroup: This is a container for multiple Radio components. It manages the state of the radio buttons and allows only one to be selected at a time.

import { Radio, RadioGroup } from "pearl-ui";

Usage#

const [checked, setIsChecked] = React.useState(false)
<Radio isChecked={checked} onPress={() => setIsChecked(true)}>Check Me!</Radio>

Radio group#

The RadioGroup component is used to manage a group of Radio components. It controls the checked state of its child Radio components and passes shared style props to each of them:

const [radioGroupValue, setRadioGroupValue] = React.useState([])
<RadioGroup  size="s"  colorScheme="secondary"  defaultValue="1"  value={radioGroupValue}  onChange={(value) => {    setRadioGroupValue(value);  }}>  <Stack direction="vertical" spacing="1.5">    <Radio value="1">Value 1</Radio>    <Radio value="2">Value 2</Radio>    <Radio value="3">Value 3</Radio>    <Radio value="4">Value 4</Radio>  </Stack></RadioGroup>

Radio sizes#

The size prop can be used to adjust the size of the radio button. The available sizes are "xs", "s", "m", and "l":

<Radio size="xs">Small Radio</Radio><Radio size="s">Regular Radio</Radio><Radio size="m">Large Radio</Radio><Radio size="l">Extra Large Radio</Radio>

Radio variants#

The variant prop can be used to change the visual style of the radio button. The available variants are "filled" and "outline":

<Radio variant="filled">Filled Radio</Radio>
<Radio variant="outline">Outline Radio</Radio>

Radio color scheme#

The colorScheme prop can be used to change the color palette of the radio button. The available color schemes are "primary", "secondary", "neutral", and others:

<Radio colorScheme="primary">Primary Radio</Radio>
<Radio colorScheme="secondary">Secondary Radio</Radio>

Radio checked state#

The isChecked prop is used to control whether the radio button is in a checked state. You can also customize the appearance of the radio button when it is checked:

<Radio  isChecked  _checked={{    bgColor: "cyan",    borderColor: "violet",  }}>  I am checked!</Radio>

Radio error state#

Similar to the checked state, you can add an error state to the radio based on any validation criteria you use along with special visual styles to go along with it by using the _invalid prop.

The isInvalid prop is used to indicate whether the radio button is in an error state.

<Radio  isInvalid  _invalid={{    bgColor: "pink",    borderColor: "red",  }}>  Error Radio</Radio>

Checkbox spacing#

The spacing prop can be used to adjust the spacing between the radio button and its label. The available spacing values are "xs", "s", "l", and others:

<Radio spacing="5">Radio with lots of spacing</Radio>
<Radio spacing="1.5">Radio with less spacing</Radio>

Overriding Styles#

You can override the default styles of the Radio component by passing style props to it. These props have higher precedence than the default styles:

// passing style prop marginTop="3" adds a top margin to the radio<Radio variant="outline" marginTop="3" borderWidth={2} borderColor="green">  Check Me!</Radio>

Example#

Embed not loading? Click here

Accessibility#

Radio has the role of radio, while the RadioGroup has the role of radiogroup.
When Radio is disabled or checked, it is reflected as disabled and checked respectively in screen readers.
Radio has the default accessibility label set as the label text passed into it. A custom label can be specified using the accessibilityLabel prop.

Radio Component Properties#

Supported Style Properties#

The Radio component is composed from the Stack component, which means all Stack properties can be passed to it.

Additional Properties#

Here is a list of additional properties that can be used with the Radio component:

Name	Required	Type	Default	Description
`size`	No	PearlTheme.components.Radio["sizes"]	`"m"`	Defines the size of the radio.
`variant`	No	PearlTheme.components.Radio["variants"]	`"filled"`	Defines the variant of the radio.
`value`	No	string \| number \| undefined		Defines the value of the radio if it is part of a group.
`isDisabled`	No	boolean	`false`	Indicates whether the radio is disabled.
`isChecked`	No	boolean	`false`	Indicates whether the radio is in a checked state.
`isInvalid`	No	boolean	`false`	Indicates whether the radio is in an error state.
`colorScheme`	No	PearlTheme.palette	`"primary"`	Defines the active color palette of the radio.
`spacing`	No	PearlTheme.spacing	`"xs"`	Defines the spacing between the radio and the label text.
`_checked`	No	object	`{}`	Style properties that are applied when the component is in a checked state.
`_invalid`	No	object	`{}`	Style properties that are applied when the component is in an invalid state.
`_disabled`	No	object	`{}`	Style properties that are applied when the component is in a disabled state.

RadioGroup Component Properties#

Supported Style Properties#

The RadioGroup component is composed from the Stack component, which means all Stack properties can be passed to it.

Additional Properties#

Here is a list of additional properties that can be used with the RadioGroup component:

Name	Required	Type	Default	Description
`size`	No	PearlTheme.components.Radio["sizes"]	`"m"`	Defines the size of all the children radios in the group.
`variant`	No	PearlTheme.components.Radio["variants"]	`"filled"`	Defines the variant of all the children radios in the group.
`spacing`	No	PearlTheme["spacing"]	`2`	Sets the spacing between the children radios in the group.
`value`	No	string \| number		Defines the active value of the radio group.
`defaultValue`	No	string \| number		Defines the default active value of the radio group.
`onChange`	No	(value: string \| number) => void		Defines the method that gets invoked when the value of the radio group changes.
`isDisabled`	No	boolean	`false`	Indicates whether the radio group is disabled.
`colorScheme`	No	PearlTheme["palette"]	`"primary"`	Defines the active color palette of all the children radio in the group.