Checkbox

Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected. Checkbox implementation is based on @react-aria/checkbox

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

Default

Checkboxes accept children, which are rendered as the label.

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 to a rounded Checkbox with the isRounded property.

Indeterminate

A Checkbox can be in an indeterminate state, controlled using the isIndeterminate prop.

Line Through

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

Checkboxes are not selected by default. The defaultSelected prop can be used to set the default state (uncontrolled). Alternatively, the isSelected prop can be used to make the selected state controlled.

Note: See React's documentation on uncontrolled components for more info.

Attribute	Type	Description	Default
children	`ReactNode`	The label for the element	-
value	`string`	The value of the input element, used when submitting an HTML form. See MDN	-
label	`string`	The label for the element	-
name	`string`	The name of the input element, used when submitting an HTML form. See MDN	-
color	NormalColors	The color of the component	`default`
labelColor	SimpleColors	The color of the label	`default`
size	NormalSizes	The size of the component	`md`
isSelected	`boolean`	Whether the element should be selected (controlled)	`false`
defaultSelected	`boolean`	Whether the element should be selected (uncontrolled)	`false`
disableAnimation	`boolean`	Whether the checkbox has animations	`false`
isDisabled	`boolean`	Whether the input is disabled	`false`
isIndeterminate	`boolean`	Indeterminism is presentational only. The indeterminate visual representation remains regardless of user interaction.	`false`
isRounded	`boolean`	Whether the checkbox is rounded	`false`
lineThrough	`boolean`	Line in the middle of the label when the `Checkbox` is checked	-
isReadOnly	`boolean`	Whether the input can be selected but not changed by the user.	`false`
isRequired	`boolean`	Whether user input is required on the input before form submission.	`false`
autoFocus	`boolean`	Whether the element should receive focus on render
containerCss `new`	`Stitches.CSS`	Override Default CSS Container style	-
css	`Stitches.CSS`	Override Default CSS style	-
as	`keyof JSX.IntrinsicElements`	Changes which tag component outputs	`label`

Checkbox Events

Attribute	Type	Description	Default
onChange	`(checked: boolean) => void`	Handler that is called when the element's selection state changes	-
onFocus	`(e: FocusEvent) => void`	Handler that is called when the element receives focus	-
onBlur	`(e: FocusEvent) => void`	Handler that is called when the element loses focus	-
onFocusChange	`(focused: boolean) => void`	Handler that is called when the element's focus status changes	-
onKeyDown	`(e: KeyboardEvent) => void`	Handler that is called when a key is pressed	-
onKeyUp	`(e: KeyboardEvent) => void`	Handler that is called when a key is released	-

Checkbox Accessibility Props

Attribute	Type	Description	Default
id	`string`	The element's unique identifier. See MDN	-
excludeFromTabOrder	`boolean`	Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available.	-
aria-controls	`string`	Identifies the element (or elements) whose contents or presence are controlled by the current element.	-
aria-label	`string`	Defines a string value that labels the current element	-
aria-labelledby	`string`	Identifies the element (or elements) that labels the current element	-
aria-describedby	`string`	Identifies the element (or elements) that describes the object.	-
aria-details	`string`	Identifies the element (or elements) that provide a detailed, extended description for the object.	-
aria-errormessage	`string`	Identifies the element that provides an error message for the object.	-

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";

Keyboard event

type BaseEvent<ReactKeyboardEvent<any>>

Textarea Checkbox Group

Created by Junior Garcia

Deployed on

Documentation