RadioButton.Item allows you to press the whole row (item) instead of only the RadioButton.



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

const MyComponent = () => {
  const [value, setValue] = React.useState('first');

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

export default MyComponent;


Type: string

Value of the radio button.

Type: string

Label to be displayed on the item.

Type: boolean

Whether radio is disabled.

Type: (e: GestureResponderEvent) => void

Function to execute on press.

Type: string
Default value: label

Accessibility label for the touchable. This is read by the screen reader when the user taps the touchable.

Type: string

Custom color for unchecked radio.

Type: string

Custom color for radio.

Type: 'checked' | 'unchecked'

Status of radio button.

Additional styles for container View.

Style that is passed to Label element.

Available in v5.x with theme version 3
Default value: 'bodyLarge'

Label text variant defines appropriate text styles for type role and its size. Available variants:

Display: displayLarge, displayMedium, displaySmall

Headline: headlineLarge, headlineMedium, headlineSmall

Title: titleLarge, titleMedium, titleSmall

Label: labelLarge, labelMedium, labelSmall

Body: bodyLarge, bodyMedium, bodySmall

Type: InternalTheme
Type: string

testID to be used on tests.

Type: 'android' | 'ios'

Whether <RadioButton.Android /> or <RadioButton.IOS /> should be used. Left undefined <RadioButton /> will be used.

Type: 'leading' | 'trailing'
Default value: 'trailing'

Radio button control position.

Edit this page