Checkbox

the Checkbox component allow the user to select one or more items from a set of options.

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

Default

You can change the state with checked prop

Disabled

Unusable and un-clickable Checkbox.

Sizes

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

Colors

You can change the color with color prop

Label Colors

You can change the Checkbox text color with labelColor prop

Rounded

You can change the full style towards a rounded Checkbox with the rounded property.

Indeterminate

You can add the indeterminate property to add a different style to the Checkbox

Line Through

Add a line in the middle of the label when the Checkbox is checked with the property line

No Animated

You can disable the animation of the entire Checkbox with the property animated={false}.

Group

You can manage a set of Checkbox with Checkbox.Group.

Row Group

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

APIs

Checkbox Props

AttributeTypeAccepted valuesDescriptionDefault
valuestring-Unique identification value (only in group)-
labelstring-Checkbox label-
colorNormalColorsNormalColorsChange checkbox colordefault
labelColorSimpleColorsSimpleColorsChange checkbox label colordefault
sizeNormalSizesNormalSizesCheckbox sizemd
checkedbooleantrue/falseDetermine the value of the checkboxfalse
initialCheckedbooleantrue/falseDetermine the initial value of the checkboxfalse
animatedbooleantrue/falseDisplay checkbox animationstrue
disabledbooleantrue/falseDisable checkboxfalse
indeterminatebooleantrue/falseIndeterminate checkboxfalse
preventDefaultbooleantrue/falsePrevent default event on when is selected through the Space, Enter keystrue
roundedbooleantrue/falseRounded checkboxfalse
linebooleantrue/falseLine in the middle of the label when the Checkbox is checked-
onChangeCheckboxEvent-The callback invoked when the checked state of the Checkbox changes.-
...LabelHTMLAttributes'form', 'className', ...Native checkbox props-

Checkbox Group Props

AttributeTypeAccepted valuesDescriptionDefault
valuestring[]-List of checked checkbox[]
rowbooleantrue/falseChange the checkbox group directionfalse
sizeNormalSizesNormalSizesSize of all checkboxes in the groupmedium
colorNormalColorsNormalColorsChange checkbox group colordefault
labelColorSimpleColorsSimpleColorsChange checkbox group label colordefault
disabledbooleantrue/falseDisable checkbox groupfalse
onChange(values: string[]) => void-Checkbox group event handler-
...HTMLAttributes'id', 'className', ...Native props-

Checkbox types

Normal Colors

type NormalColors =
  | 'default'
  | 'primary'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'gradient';

Simple Colors

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

Normal Sizes

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