Checkbox Group

A CheckboxGroup allows users to select one or more items from a list of choices.

Installation

npx nextui-cli@latest add checkbox

The above command is for individual installation only. You may skip this step if @nextui-org/react is already installed globally.

Import

NextUI exports 2 checkbox-related components:

• CheckboxGroup: The root component, it wraps the label and the wrapper.
• Checkbox: The checkbox component.

Usage

Disabled

Horizontal

Controlled

You can use the value and onValueChange properties to control the checkbox input value.

Invalid

Slots

• base: Checkbox group root wrapper, it wraps the label and the wrapper.
• wrapper: Checkbox group wrapper, it wraps all checkboxes.
• label: Checkbox group label, it is placed before the wrapper.
• description: The description of the checkbox group.
• errorMessage: The error message of the checkbox group.

Custom Styles

You can customize the CheckboxGroup component by passing custom Tailwind CSS classes to the component slots.

Custom Implementation

In case you need to customize the checkbox even further, you can use the useCheckboxGroup hook to create your own implementation.

Note: We used Tailwind Variants to implement the styles above, you can use any other library such as clsx to achieve the same result.

API

Checkbox Group Props

Checkbox Group Events