Radio

Inputs & Controls

Radio

Composable, cross-platform radio with Material theming.

Usage

Offer mutually exclusive options within a group.

Highlights

• Composable RadioGroup / RadioRow / Radio.Label slots
• Label-to-control linking (web aria-labelledby); only control + label are pressable

When to use it

• Only one option may be selected.
• You want accessible, composable labeled rows.

Related components

CheckboxSelect

Anatomy

Radio is a composable compound component:

• RadioGroup holds the selected value (value / onChange, or uncontrolled defaultValue).
• RadioRow binds a value to a labeled row. The row itself is not pressable — only the control and the label are. The label is linked to the control for accessibility (web aria-labelledby).
• Radio is the control (the circle). Used inside a RadioRow, or standalone under a RadioGroup with its own value.
• Radio.Label is the row's label. Pressing it selects the row's value.

Examples

Bare radios

Preview (Web)

import { Radio, RadioGroup } from 'react-native-molecules/components/Radio';
import { useState } from 'react';

export default function Example() {
  const [value, setValue] = useState('first');

  return (
      <RadioGroup value={value} onChange={setValue}>
          <Radio value="first" />
          <Radio value="second" />
      </RadioGroup>
  );
}

Labeled group

Preview (Web)

import { Radio, RadioGroup, RadioRow } from 'react-native-molecules/components/Radio';
import { useState } from 'react';

export default function Example() {
  const [value, setValue] = useState('first');

  return (
      <RadioGroup value={value} onChange={setValue}>
          <RadioRow value="first">
              <Radio />
              <Radio.Label>First option</Radio.Label>
          </RadioRow>
          <RadioRow value="second">
              <Radio />
              <Radio.Label>Second option</Radio.Label>
          </RadioRow>
      </RadioGroup>
  );
}

Label-first ordering

Composition controls the layout — put Radio.Label before Radio to render the control on the trailing edge.

Preview (Web)

import { Radio, RadioGroup, RadioRow } from 'react-native-molecules/components/Radio';

export default function Example() {
  return (
      <RadioGroup defaultValue="second">
          <RadioRow value="first">
              <Radio.Label>First option</Radio.Label>
              <Radio />
          </RadioRow>
          <RadioRow value="second">
              <Radio.Label>Second option</Radio.Label>
              <Radio />
          </RadioRow>
      </RadioGroup>
  );
}