Radio Group

A set of checkable buttons where only one can be checked at a time.

Default

Comfortable

Compact

Installation

npm

npx @galaxy-stack/nebula-cli@latest add radio-group

pnpm

pnpm dlx @galaxy-stack/nebula-cli@latest add radio-group

yarn

yarn dlx @galaxy-stack/nebula-cli@latest add radio-group

bun

bunx @galaxy-stack/nebula-cli@latest add radio-group

global

# If you have installed galaxy-design globally
galaxy-design add radio-group

Usage

API Reference

Props

Prop	Type	Default	Description	Frameworks
value	string	-	Controlled selected value	All
defaultValue	string	-	Uncontrolled initial value	All
onValueChange	(value: string) => void	-	Called when value changes	All
disabled	boolean	false	Disables the radio group	All
required	boolean	false	Requires value before form submission	All
orientation	'horizontal' | 'vertical'	'vertical'	Layout orientation	All
name	string	-	Name for form submission	All
className	string	''	CSS class names	React, React Native
class	string	''	CSS class names	Vue, Angular, Flutter

RadioGroupItem

Prop	Type	Default	Description	Frameworks
value	string	-	Item value	All
disabled	boolean	false	Disables the item	All
className	string	''	CSS class names	React, React Native
class	string	''	CSS class names	Vue, Angular, Flutter

Usage

<script setup lang="ts">
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
import { Label } from '@/components/ui/label'
</script>

<template>
  <RadioGroup default-value="option-one">
    <div class="flex items-center space-x-2">
      <RadioGroupItem id="option-one" value="option-one" />
      <Label for="option-one">Option One</Label>
    </div>
    <div class="flex items-center space-x-2">
      <RadioGroupItem id="option-two" value="option-two" />
      <Label for="option-two">Option Two</Label>
    </div>
  </RadioGroup>
</template>

React

import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Label } from "@/components/ui/label"

<RadioGroup defaultValue="option-one">
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option-one" id="option-one" />
    <Label htmlFor="option-one">Option One</Label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option-two" id="option-two" />
    <Label htmlFor="option-two">Option Two</Label>
  </div>
</RadioGroup>

Angular

@Component({
  template: `
    <ui-radio-group [(value)]="selectedValue">
      <div class="flex items-center space-x-2">
        <ui-radio-group-item value="option-one" />
        <ui-label>Option One</ui-label>
      </div>
    </ui-radio-group>
  `
})

Bùi Trọng Hiếu (kevinbui) - MIT © 2025

Accessibility

• Keyboard Navigation: [TODO]
• Screen Reader: [TODO]
• Focus Management: [TODO]
• WCAG Compliance: WCAG 2.1 Level AA compliant

Author

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

License

MIT © 2025 Bùi Trọng Hiếu (kevinbui)