JollyUI
  1. Docs
  2. components
  3. CheckboxGroup

CheckboxGroup

A CheckboxGroup allows users to select multiple items from a list of options.

Checkbox groups can be built in HTML with the <fieldset> and <input> elements, however these can be difficult to style. CheckboxGroup helps achieve accessible checkbox groups that can be styled as needed.

Favorite sports

Installation

npx shadcn@latest add https://jollyui.dev/default/checkbox

Composed Components

A CheckboxGroup uses the following components, which may also be used standalone or reused in other components.

Label

A label provides context for an element.

Checkbox

A checkbox allows a user to select multiple items from a list of individual items, or to mark one individual item as selected.

Reusable Wrapper - Example

If you will use a CheckboxGroup in multiple places in your app, you can wrap all of the pieces into a reusable component. This way, the DOM structure, styling code, and other logic are defined in a single place and reused everywhere to ensure consistency.

The installed file includes a reusable wrapper JollyCheckboxGroup. This wrapper serves as an excellent starting point for use throughout your codebase.

Favorite sportsSelect a favorite sport

The JollyCheckboxGroup component extends the props of React Aria CheckboxGroup and adds:

PropTypeDefaultDescription
labelstring | undefinedundefinedLabel for the checkbox group
descriptionstring | undefinedundefinedDescription text for the checkbox group
errorMessagestring | ((validation: AriaValidationResult) => string) | undefinedundefinedError message to display or function to generate it

You can copy this wrapper and create variations as needed for different use cases in your application. This approach promotes consistency while still allowing for flexibility in implementation.

Examples

Basic

Favorite sports

Validation

Sandwich condiments

Individual Checkbox Validation

Agree to the following

Description

PetsSelect your pets.

Disabled

The entire CheckboxGroup can be disabled with the isDisabled prop.

Favorite sports

To disable an individual checkbox, pass isDisabled to the Checkbox instead.

Favorite sports

Read-only

Favorite sports