Radio Group

A Radio Group component allows users to select one option from a set of mutually exclusive choices. Built on top of heroui-native RadioGroup.

Demo

React Native components render to native views, so this is the component running in the example app, in the theme you are reading in.

9:41
Radio Group running in the Nayan UI example app

Usage

Source
RadioGroup.tsx
import { View } from 'react-native';
import { useState } from 'react';
import { NRadio, NText } from '@nayan-ui/native';


export default function RadioScreen() {
  const [fruit, setFruit] = useState('apple');
  const [size, setSize] = useState('md');


  return (
    <View className="p-4 gap-4">
      <NText className="text-lg font-bold">Basic</NText>
      <NRadio
        label="Favorite fruit"
        value={fruit}
        onValueChange={setFruit}
        items={[
          { label: 'Apple', value: 'apple' },
          { label: 'Banana', value: 'banana' },
          { label: 'Cherry', value: 'cherry' },
          { label: 'Date', value: 'date' }
        ]}
      />
      <NText>Selected: {fruit}</NText>


      <NText className="text-lg font-bold">Size selection</NText>
      <NRadio
        label="Size"
        value={size}
        onValueChange={setSize}
        items={[
          { label: 'Small', value: 'sm' },
          { label: 'Medium', value: 'md' },
          { label: 'Large', value: 'lg' }
        ]}
      />


      <NText className="text-lg font-bold">Disabled</NText>
      <NRadio
        isDisabled
        value="a"
        onValueChange={() => {}}
        items={[
          { label: 'Option A', value: 'a' },
          { label: 'Option B', value: 'b' }
        ]}
      />
    </View>
  );
}

Attributes

8 props
NameTypeDefaultDetails
valuestringRequiredCurrently selected value.
itemsRadioItem[]RequiredArray of radio items with label and value.
onValueChange(value: string) => voidRequiredCallback when selection changes.
labelstringOptionalLabel for the radio group.
isDisabledbooleanfalseWhether the radio group is disabled.
classNamestring' 'You can customise container by passing tailwind classes.
labelClassNamestring' 'You can customise group label by passing tailwind classes.
itemClassNamestring' 'You can customise individual radio items by passing tailwind classes.

Tags

Other components solving nearby problems.