Back to React Native Paper

RadioButton

docs/public/2.0/radio-button.html

5.15.11.7 KB
Original Source

RadioButton

Radio buttons allow the selection a single option from a set.

Android (enabled)

Android (disabled)

iOS (enabled)

iOS (disabled)

Usage

js
import * as React from 'react';
import { View } from 'react-native';
import { RadioButton } from 'react-native-paper';

export default class MyComponent extends React.Component {
  state = {
    checked: 'first',
  };

  render() {
    const { checked } = this.state;

    return (
      <View>
        <RadioButton
          value="first"
          status={checked === 'first' ? 'checked' : 'unchecked'}
          onPress={() => { this.setState({ checked: 'first' }); }}
        />
        <RadioButton
          value="second"
          status={checked === 'second' ? 'checked' : 'unchecked'}
          onPress={() => { this.setState({ checked: 'second' }); }}
        />
      </View>
    );
  }
}

Props

value (required) Type: string

Value of the radio button

status Type: 'checked' | 'unchecked'

Status of radio button.

disabled Type: boolean

Whether radio is disabled.

onPress Type: () => mixed

Function to execute on press.

uncheckedColor Type: string

Custom color for unchecked radio.

color Type: string

Custom color for radio.

theme Type: Theme

Static properties

These properties can be accessed on RadioButton by using the dot notation, e.g. RadioButton.Group.

Group

Android

IOS