Radio

Radio buttons allow users to select one option from a set of mutually exclusive choices. Follows the Material Design 3 Radio button specification.

Usage

Open on Snack ↗

import { Radio } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { useState } from 'react'
import { View } from 'react-native'

export default function App() {
  const [selected, setSelected] = useState('a')
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', gap: 12 }}>
          <Radio value={selected === 'a'} onValueChange={() => setSelected('a')} />
          <Radio value={selected === 'b'} onValueChange={() => setSelected('b')} />
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

Radio Group

Build a radio group by controlling which Radio has value={true}:

Open on Snack ↗

import { Radio } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { useState } from 'react'
import { View } from 'react-native'

export default function App() {
  const [choice, setChoice] = useState('option1')
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', gap: 12 }}>
          <Radio value={choice === 'option1'} onValueChange={() => setChoice('option1')} />
          <Radio value={choice === 'option2'} onValueChange={() => setChoice('option2')} />
          <Radio value={choice === 'option3'} onValueChange={() => setChoice('option3')} />
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

Disabled

Open on Snack ↗

import { Radio } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { View } from 'react-native'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', gap: 12 }}>
          <Radio value={false} onValueChange={() => {}} disabled />
          <Radio value onValueChange={() => {}} disabled />
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

Props

Prop	Type	Default	Required	Description
value	boolean		No	Whether the radio button is selected.
onValueChange	(value: boolean) => void	-	No	Callback fired when the radio is pressed. Receives the new value.
containerColor	string	-	No	Override the outer ring and inner dot color when selected. State-layer colors (hover, press) are derived automatically.
contentColor	string	-	No	Override the outer ring color when unselected.
style	StyleProp<ViewStyle>	-	No	Style applied to the root container. Static form only — the function form `(state) => style` is not supported because the component drives its container background through Reanimated. Use `containerColor` / `contentColor` for state-aware styling.
onKeyDown	(event: { nativeEvent: { key?: string; }; }) => void	-	No	-