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.

CLI

Manual

In the terminal, run the following command to begin:

npx hq-kit add checkbox

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/>