Radio

lunar add radio
# For radio groups
lunar add radio-group

import { Radio } from '@/components/ui/radio';
 
const [checked, setChecked] = useState(false);
 
<Radio checked={checked} onCheckedChange={setChecked}>
<Text>Option</Text>
</Radio>

import {
RadioGroup,
RadioGroupItem,
RadioGroupLabel,
RadioGroupDescription,
} from '@/components/ui/radio-group';
 
const [value, setValue] = useState('option1');
 
<RadioGroup value={value} onValueChange={setValue}>
<RadioGroupItem value="option1">
  <RadioGroupLabel>Option 1</RadioGroupLabel>
</RadioGroupItem>
<RadioGroupItem value="option2">
  <RadioGroupLabel>Option 2</RadioGroupLabel>
</RadioGroupItem>
<RadioGroupItem value="option3">
  <RadioGroupLabel>Option 3</RadioGroupLabel>
</RadioGroupItem>
</RadioGroup>

<RadioGroup value={value} onValueChange={setValue} size="sm">
{/* Small radio buttons */}
</RadioGroup>
 
<RadioGroup value={value} onValueChange={setValue} size="md">
{/* Medium (default) */}
</RadioGroup>
 
<RadioGroup value={value} onValueChange={setValue} size="lg">
{/* Large radio buttons */}
</RadioGroup>

// Vertical (default)
<RadioGroup orientation="vertical" value={value} onValueChange={setValue}>
{/* Items stacked vertically */}
</RadioGroup>
 
// Horizontal
<RadioGroup orientation="horizontal" value={value} onValueChange={setValue}>
{/* Items in a row */}
</RadioGroup>

<RadioGroup value={value} onValueChange={setValue}>
<RadioGroupItem value="free">
  <View>
    <RadioGroupLabel>Free Plan</RadioGroupLabel>
    <RadioGroupDescription>
      Basic features for personal use
    </RadioGroupDescription>
  </View>
</RadioGroupItem>
 
<RadioGroupItem value="pro">
  <View>
    <RadioGroupLabel>Pro Plan</RadioGroupLabel>
    <RadioGroupDescription>
      Advanced features for professionals
    </RadioGroupDescription>
  </View>
</RadioGroupItem>
</RadioGroup>

// Disable entire group
<RadioGroup value={value} onValueChange={setValue} disabled>
{/* All items disabled */}
</RadioGroup>
 
// Disable specific item
<RadioGroup value={value} onValueChange={setValue}>
<RadioGroupItem value="option1">
  <RadioGroupLabel>Available</RadioGroupLabel>
</RadioGroupItem>
<RadioGroupItem value="option2" disabled>
  <RadioGroupLabel>Unavailable</RadioGroupLabel>
</RadioGroupItem>
</RadioGroup>