Nebula UI
Introduction
IconLabelColorsTypography
Button
AlertBadgeBannerLoaderProgress BarEmptyTooltip
HeaderNavbarSidebarTabsPaginationBreadcrumbSeparator
AvatarModule BoxChartsColor CardsTableSliderCalendar
Text InputPassword InputTextarea InputCheckboxSwitchRadiogroupSelectorSearch BarDatepickerFile Upload
DropdownPopoverDialogTourDrawerAccordion
Overview
Design Themes

Nebula UI Library

v1.0.0

Component

Radiogroup

Disponible

Un conjunto de botones de selección que permite al usuario elegir una única opción de una lista.

Single Selection · Disabled · Sizes

Import

Importa los estilos base y los componentes RadioGroup y RadioItem.

TypeScript
1import 'nave-ui-library/styles.css'
2import { RadioGroup, RadioItem } from 'nave-ui-library/react'

Basic Usage

Los Radio Items deben envolverse en un RadioGroup para gestionar la selección única.

Variants

La variante principal del Radio se expresa por tamaño: regular y small.

regular
small

API Reference

Todas las props disponibles para RadioGroup y RadioItem.

PropTypeDefaultDescription
value
string—Unique item value used by RadioGroup.
label
string—Main label text displayed next to the checkbox.
description
string—Optional helper text displayed below the label.
size
'regular' | 'small' | 'extraSmall'regularControls the radio size and text scale.
defaultValue
string—Initial selected value on RadioGroup.
onValueChange
(value: string) => void—Callback fired when selected radio changes.
disabled
booleanfalseDisables the radio interaction.
label
string—Etiqueta del radio.
description
string—Descripción debajo de la etiqueta.
disabled
boolean—Deshabilita el item.
tokens
Partial<ThemeTokensBase>—Override local de tema/tokens.

Registry

Ver configuración técnica del registro
JSON
1{
2 "name": "Radio",
3 "description": "Radio button para selección única.",
4 "component": "RadioGroup",
5 "files": [
6 "components/base/data-entry/selection-controls/Radio.tsx"
7 ],
8 "dependencies": [
9 "react",
10 "@radix-ui/react-radio-group",
11 "class-variance-authority"
12 ],
13 "void": true,
14 "props": {
15 "value": {
16 "type": "string",
17 "required": true,
18 "description": "Unique item value used by RadioGroup."
19 },
20 "label": {
21 "type": "string",
22 "description": "Main label text displayed next to the checkbox."
23 },
24 "description": {
25 "type": "string",
26 "description": "Optional helper text displayed below the label."
27 },
28 "size": {
29 "type": "'regular' | 'small' | 'extraSmall'",
30 "default": "regular",
31 "description": "Controls the radio size and text scale."
32 },
33 "defaultValue": {
34 "type": "string",
35 "description": "Initial selected value on RadioGroup."
36 },
37 "onValueChange": {
38 "type": "(value: string) => void",
39 "description": "Callback fired when selected radio changes."
40 },
41 "disabled": {
42 "type": "boolean",
43 "default": false,
44 "description": "Disables the radio interaction."
45 }
46 },
47 "states": {
48 "unchecked": {},
49 "checked": {},
50 "disabled": {}
51 }
52}