Skip to main content

RadioButton

Inputs & Controls

RadioButton

Cross-platform radio button with Material theming.

Usage

Offer mutually exclusive options within a list.

Highlights

  • Android/iOS specific drawings
  • Supports horizontal groups

When to use it

  • Only one option may be selected.
  • You need accessible labeling via ListItem wrappers.

Related components

CheckboxSelect

Examples​

Default​

Preview (Web)
import { RadioButton } from 'react-native-molecules/components/RadioButton';

export default function Example() {
  return <RadioButton value="default" status="checked" />;
}

Radio Item​

Preview (Web)
import { RadioButton } from 'react-native-molecules/components/RadioButton';

export default function Example() {
  return <RadioButton.Item value="item" label="Radio Item Label" />;
}

With Radio Group​

Preview (Web)
import { useState } from 'react';
import { RadioButton } from 'react-native-molecules/components/RadioButton';

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

  return (
      <RadioButton.Group onValueChange={setValue} value={value}>
          <RadioButton.Item value="first" label="First Item" />
          <RadioButton.Item value="second" label="Second Item" />
      </RadioButton.Group>
  );
}

With Uncontrolled Radio Group​

Preview (Web)
import { RadioButton } from 'react-native-molecules/components/RadioButton';

export default function Example() {
  return (
      <RadioButton.Group defaultValue="second">
          <RadioButton.Item value="first" label="First Item" />
          <RadioButton.Item value="second" label="Second Item" />
      </RadioButton.Group>
  );
}