RadioGroup

The RadioGroup component provides a set of mutually exclusive radio options. Built with React Native's View and Pressable, it manages selection state and renders circular indicators with a filled dot for the selected item.

Preview

Option A

Option B

Option C

Installation

npx novaui-cli add radio-group

Import

import { RadioGroup, RadioGroupItem } from 'novaui-components'

Basic Usage

A radio group with multiple options where only one can be selected:

Default

Comfortable

Compact

import { useState } from 'react'
import { RadioGroup, RadioGroupItem } from 'novaui-components'
import { Text, View } from 'react-native'

export function BasicRadioGroup() {
  const [value, setValue] = useState('default')

  return (
    <RadioGroup value={value} onValueChange={setValue}>
      <View className="flex-row items-center gap-2">
        <RadioGroupItem value="default" />
        <Text className="text-sm text-foreground">Default</Text>
      </View>
      <View className="flex-row items-center gap-2">
        <RadioGroupItem value="comfortable" />
        <Text className="text-sm text-foreground">Comfortable</Text>
      </View>
      <View className="flex-row items-center gap-2">
        <RadioGroupItem value="compact" />
        <Text className="text-sm text-foreground">Compact</Text>
      </View>
    </RadioGroup>
  )
}

Examples

With Descriptions

FreeBasic features for personal use

ProAdvanced features for professionals

EnterpriseFull suite for teams and organizations

import { useState } from 'react'
import { RadioGroup, RadioGroupItem } from 'novaui-components'
import { Text, View } from 'react-native'

export function RadioGroupWithDescriptions() {
  const [plan, setPlan] = useState('free')

  return (
    <RadioGroup value={plan} onValueChange={setPlan} className="gap-4">
      <View className="flex-row items-start gap-2">
        <RadioGroupItem value="free" />
        <View>
          <Text className="text-sm font-medium text-foreground">Free</Text>
          <Text className="text-sm text-muted-foreground">Basic features for personal use</Text>
        </View>
      </View>
      <View className="flex-row items-start gap-2">
        <RadioGroupItem value="pro" />
        <View>
          <Text className="text-sm font-medium text-foreground">Pro</Text>
          <Text className="text-sm text-muted-foreground">Advanced features for professionals</Text>
        </View>
      </View>
      <View className="flex-row items-start gap-2">
        <RadioGroupItem value="enterprise" />
        <View>
          <Text className="text-sm font-medium text-foreground">Enterprise</Text>
          <Text className="text-sm text-muted-foreground">Full suite for teams and organizations</Text>
        </View>
      </View>
    </RadioGroup>
  )
}

Disabled Item

Light

Dark

System (unavailable)

<RadioGroup value="light" onValueChange={setValue}>
  <View className="flex-row items-center gap-2">
    <RadioGroupItem value="light" />
    <Text className="text-sm text-foreground">Light</Text>
  </View>
  <View className="flex-row items-center gap-2">
    <RadioGroupItem value="dark" />
    <Text className="text-sm text-foreground">Dark</Text>
  </View>
  <View className="flex-row items-center gap-2">
    <RadioGroupItem value="system" disabled />
    <Text className="text-sm text-muted-foreground">System (unavailable)</Text>
  </View>
</RadioGroup>

Props API

RadioGroupProps

Extends React.ComponentPropsWithoutRef<typeof View> and includes:

Prop	Type	Default	Description
`value`	`string`	-	The currently selected value
`onValueChange`	`(value: string) => void`	-	Callback fired when a radio item is selected
`className`	`string`	-	Additional CSS classes for the group container

RadioGroupItemProps

Extends React.ComponentPropsWithoutRef<typeof Pressable> and includes:

Prop	Type	Default	Description
`value`	`string`	required	The value this item represents
`checked`	`boolean`	-	Whether this item is selected (managed by RadioGroup)
`className`	`string`	-	Additional CSS classes for custom styling

Best Practices

Use for mutually exclusive choices: Radio groups enforce single selection — use when only one option is valid
Pre-select a default: Always set an initial value to avoid empty form submissions
Keep options visible: Show all options at once; if there are too many, consider using a Select instead
Label each option: Always pair each RadioGroupItem with descriptive text

Use Checkbox when multiple selections are allowed
Use Select when the list of options is long and should be collapsed
Pair with Field and FieldLabel for accessible labeled groups

Continue reading

Getting Started Components Overview Popular: Dialog SEO Playbook

RadioGroup

Continue reading

On this page