Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Multiple Checkboxes Field for React

Show these items on the desktop, with Hard disks already checked and External disks, CDs, DVDs, and iPods, and Connected servers off.

The caption is Show these items on the desktop. Under it: Select the items you want to show on the desktop. Hard disks starts checked. External disks, CDs, DVDs, and iPods, and Connected servers start off.

It fits independent options under one question. If only one can be on, use a Radio Group. In React, Base UI does not change the desktop.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Field anatomy: root, label, input, description, error

Usage

<FieldSet className="w-full max-w-md">
  <FieldLegend variant="label">Show these items on the desktop</FieldLegend>
  <FieldDescription>
    Select the items you want to show on the desktop.
  </FieldDescription>
  <FieldGroup className="gap-3">
    <Field orientation="horizontal">
      <Checkbox defaultChecked id="desktop-hard-disks" />
      <FieldLabel className="font-normal" htmlFor="desktop-hard-disks">
        Hard disks
      </FieldLabel>
    </Field>
    <Field orientation="horizontal">
      <Checkbox id="desktop-external-disks" />
      <FieldLabel className="font-normal" htmlFor="desktop-external-disks">
        External disks
      </FieldLabel>
    </Field>
    <Field orientation="horizontal">
      <Checkbox id="desktop-cds-dvds" />
      <FieldLabel className="font-normal" htmlFor="desktop-cds-dvds">
        CDs, DVDs, and iPods
      </FieldLabel>
    </Field>
    <Field orientation="horizontal">
      <Checkbox id="desktop-connected-servers" />
      <FieldLabel className="font-normal" htmlFor="desktop-connected-servers">
        Connected servers
      </FieldLabel>
    </Field>
  </FieldGroup>
</FieldSet>

FAQ

What is the desktop line above the boxes?

FieldLegend with variant set to label is the question on the FieldSet: Show these items on the desktop. FieldDescription under it reads Select the items you want to show on the desktop.

How is each checkbox laid out?

Each option is a Field with orientation set to horizontal. The Checkbox comes first, then a FieldLabel with font-normal.

Which box starts checked?

Hard disks. External disks, CDs, DVDs, and iPods, and Connected servers pass no default, so they start off. Hard disks sets defaultChecked.

Can more than one box be checked?

Yes. Each checkbox is its own control, so any combination can be on. The FieldGroup stacks them with gap-3.

How does each label connect?

FieldLabel names the checkbox. Its htmlFor matches the control's id. The legend names the group and does not replace those labels.

How wide is the list?

The list is capped with max-w-md. The legend, the description, and the four rows share that width.

API Reference

Field

Sets variant="label", orientation="horizontal", htmlFor="desktop-hard-disks", htmlFor="desktop-external-disks", htmlFor="desktop-cds-dvds" and htmlFor="desktop-connected-servers". The rest is on the Field page.

Checkbox

Sets defaultChecked, id="desktop-hard-disks", id="desktop-external-disks", id="desktop-cds-dvds" and id="desktop-connected-servers". The rest is on the Checkbox page.

All 38 field examples