Skip to content

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

Free

Multiple Checkboxes Field for Solid

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

UI library: Ark UI

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 Solid, Ark UI does not change the desktop.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<FieldSet class="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 class="gap-3">
      <Field orientation="horizontal">
        <Checkbox defaultChecked />
        <FieldLabel class="font-normal">Hard disks</FieldLabel>
      </Field>
      <Field orientation="horizontal">
        <Checkbox />
        <FieldLabel class="font-normal">External disks</FieldLabel>
      </Field>
      <Field orientation="horizontal">
        <Checkbox />
        <FieldLabel class="font-normal">CDs, DVDs, and iPods</FieldLabel>
      </Field>
      <Field orientation="horizontal">
        <Checkbox />
        <FieldLabel class="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