RadioButton

A Jetpack Compose RadioButton component for single-selection controls.

Android

GitHub

npm

Changelog

Bundled version:

~55.0.0

A radio button component for selecting a single option from a set. See the official Jetpack Compose documentation for more information.

Installation

Terminal

- npx expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

Basic radio button

BasicRadioButton.tsx

import { useState } from 'react';
import { Host, RadioButton } from '@expo/ui/jetpack-compose';

export default function BasicRadioButton() {
  const [selected, setSelected] = useState(false);

  return (
    <Host matchContents>
      <RadioButton selected={selected} onClick={() => setSelected(!selected)} />
    </Host>
  );
}

Radio button group

Combine multiple RadioButton components to create a single-selection group.

RadioButtonGroup.tsx

import { useState } from 'react';
import { Host, Column, RadioButton, ListItem } from '@expo/ui/jetpack-compose';

export default function RadioButtonGroup() {
  const [selectedOption, setSelectedOption] = useState('option1');

  return (
    <Host matchContents>
      <Column>
        <ListItem headline="Option 1" onPress={() => setSelectedOption('option1')}>
          <ListItem.Trailing>
            <RadioButton
              selected={selectedOption === 'option1'}
              onClick={() => setSelectedOption('option1')}
            />
          </ListItem.Trailing>
        </ListItem>
        <ListItem headline="Option 2" onPress={() => setSelectedOption('option2')}>
          <ListItem.Trailing>
            <RadioButton
              selected={selectedOption === 'option2'}
              onClick={() => setSelectedOption('option2')}
            />
          </ListItem.Trailing>
        </ListItem>
        <ListItem headline="Option 3" onPress={() => setSelectedOption('option3')}>
          <ListItem.Trailing>
            <RadioButton
              selected={selectedOption === 'option3'}
              onClick={() => setSelectedOption('option3')}
            />
          </ListItem.Trailing>
        </ListItem>
      </Column>
    </Host>
  );
}

API

import { RadioButton } from '@expo/ui/jetpack-compose';

Component

`RadioButton`

Android

Type: React.Element<RadioButtonProps>

A Material Design radio button.

RadioButtonProps

`modifiers`

Android

Optional • Type: ExpoModifier[]

Modifiers for the component.

`onClick`

Android

Optional • Type: () => void

Callback that is called when the radio button is clicked.

`selected`

Android

Type: boolean

Whether the radio button is selected.