Radio

Radios are used when only one choice may be selected in a series of options.

import { Radio } from '@nextui-org/react';

Default

You can change the state with checked prop

Disabled

Unusable and un-clickable Radio.

Sizes

Change the size of the entire Radio including padding, font-size and border with the size property.

Colors

You can change the color with color prop

Text Colors

You can change the Radio text color with textColor prop

Squared

You can change the full style towards a squared Radio with the squared property.

Description

You can add a description to the Radio with Radio.Description component

Row

You can change the Radio.Group direction with row prop.

APIs

Radio Props

AttributeTypeAccepted valuesDescriptionDefault
valuestring-Unique ident value (in group)-
colorSimpleColors stringSimpleColorsChange radio colorprimary
sizeNormalSizes numberNormalSizesRadio sizemedium
textColorSimpleColors stringSimpleColorsChange radio text colordefault
checkedbooleantrue/falseSelected or not (in single)false
animatedbooleantrue/falseDisplay radio animationstrue
squaredbooleantrue/falseSquared radiofalse
disabledbooleantrue/falseDisable radiofalse
preventDefaultbooleantrue/falsePrevent default event on when is selected through the Space, Enter keystrue
onChange(e: RadioEvent) => void-The callback invoked when the checked state of the Radio changes.-
idstring-Native id attr-
...InputHTMLAttributes'id', 'className', ...Native radio props-

Radio Group Props

AttributeTypeAccepted valuesDescriptionDefault
colorSimpleColors stringSimpleColorsChange radio group colorprimary
textColorSimpleColors stringSimpleColorsChange radio group text colordefault
initialValuestring/number-Initial radio group value-
valuestring/number-Selected child radio-
rowbooleantrue/falseChange the radio group directionfalse
disabledbooleantrue/falseDisable all radiosfalse
sizeNormalSizesNormalSizesSize of all radios in the groupmedium
onChange(e:RadioEvent) => void-Radio group event handler-
...InputHTMLAttributes'id', 'className', ...Native props-

Radio Desc Props

AttributeTypeAccepted valuesDescriptionDefault
...HTMLAttributes'id', 'className', ...native props-

Radio types

Simple Colors

type SimpleColors =
  | 'default'
  | 'primary'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error';

Normal Sizes

type NormalSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

Radio Event

interface RadioEvent {
  target: RadioEventTarget;
  stopPropagation: () => void;
  preventDefault: () => void;
  nativeEvent: React.ChangeEvent;
}

Radio Event Target

interface RadioEventTarget {
  checked: boolean;
}