Radio

Forms

A radio group that renders a list of mutually exclusive options. Selection is indicated by an animated filled circle.

Installation

bash

npx native-mate add radio

Examples

#FAFAFA

Radius100%

Usage

tsx

import { Radio } from '~/components/ui/radio'
import { useState } from 'react'

const [plan, setPlan] = useState('free')

const options = [
  { label: 'Free', value: 'free', description: 'Up to 3 projects' },
  { label: 'Pro', value: 'pro', description: 'Unlimited projects' },
  { label: 'Team', value: 'team', description: 'Collaboration features' },
]

<Radio label="Plan" options={options} value={plan} onValueChange={setPlan} />

Props

Prop	Type	Default	Description
options	Array<{ label: string; value: string; description?: string }>	—	Array of radio option definitions.
value	string	—	Currently selected value.
onValueChange	(value: string) => void	—	Called when the user selects a different option.
label	string	—	Group label rendered above the options.
disabled	boolean	false	Disables the entire group.

Example

tsx

import { useState } from 'react'
import { Radio } from '~/components/ui/radio'
import { Button } from '~/components/ui/button'
import { View } from 'react-native'

const SHIPPING = [
  { label: 'Standard', value: 'standard', description: '5–7 business days — free' },
  { label: 'Express', value: 'express', description: '2–3 business days — $9.99' },
  { label: 'Overnight', value: 'overnight', description: 'Next business day — $24.99' },
]

export function RadioExample() {
  const [shipping, setShipping] = useState('standard')

  return (
    <View style={{ gap: 16, padding: 16 }}>
      <Radio label="Shipping method" options={SHIPPING} value={shipping} onValueChange={setShipping} />
      <Button>Continue to payment</Button>
    </View>
  )
}

Toast

OTP Input