Checkbox Group

A checkbox group lets users select multiple items from a list of options, offering flexible choices for enhanced user interaction and control.

Basic

A group of checkboxes that lets you select multiple options at once.

If you hit any issues, make sure you check out the installation guide here.

When you plug this component from the CLI, it autoloads all the composed components. No need to toss 'em in one at a time.

The Checkbox Group's decked out with several components to make it bangin'.

Field's a core piece every other component uses. It flexes reusable styles, showing up in inputs, labels, descriptions, and more.

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

And next, you can copy the code below and paste it into your dopest component folder.

Add a description to the checkbox group using the description prop.

Preview

Code

User Permissions

Read

Write

Delete

Admin

Select the permissions you want to grant to the user.

The checkbox group is in an error state.

The checkbox group is in an indeterminate state.

Preview

Code

EncryptionEnable encryption.

FirewallEnable firewall protection.

BackupEnable automatic backups.

Anomaly DetectionEnable anomaly detection.

Control the checkbox group value with the value prop.

Preview

Code

Options

Sound

Wi-Fi

Sync

No values selected

Disable the entire checkbox group by passing the isDisabled prop.

When you need just a read-only checkbox group, pass the isReadOnly prop.

<CheckboxGroup isReadOnly/>