Skip to content

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

Free

Multiple Checkboxes Field for Ark UI

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, Ark 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 />
      <FieldLabel className="font-normal">Hard disks</FieldLabel>
    </Field>
    <Field orientation="horizontal">
      <Checkbox />
      <FieldLabel className="font-normal">External disks</FieldLabel>
    </Field>
    <Field orientation="horizontal">
      <Checkbox />
      <FieldLabel className="font-normal">CDs, DVDs, and iPods</FieldLabel>
    </Field>
    <Field orientation="horizontal">
      <Checkbox />
      <FieldLabel className="font-normal">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. Field connects the two for you, with no ids to write. 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" and orientation="horizontal". The rest is on the Field page.

Checkbox

Sets defaultChecked. The rest is on the Checkbox page.

All 38 field examples