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

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


You can change the state with checked prop


Unusable and un-clickable Radio.


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


You can change the color with color prop

Text Colors

You can change the Radio text color with textColor prop


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


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


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


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;