Skip to content

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

Free

Checkbox with Description Field for Ark UI

A checked box labeled Sync Desktop & Documents folders, with a note that those folders sync with iCloud Drive.

The box starts checked. Beside it: Sync Desktop & Documents folders, then a note that those folders sync with iCloud Drive and can be opened from other devices.

It fits a checkbox that needs a sentence, not only a name. An on or off setting that applies immediately is a Switch. In React, Ark UI does not sync the folders.

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

<Field className="max-w-md" orientation="horizontal">
  <Checkbox defaultChecked />
  <FieldContent>
    <FieldLabel>Sync Desktop & Documents folders</FieldLabel>
    <FieldDescription>
      Your Desktop & Documents folders are being synced with iCloud Drive. You
      can access them from other devices.
    </FieldDescription>
  </FieldContent>
</Field>

FAQ

How are the box and the sentences arranged?

orientation is horizontal. The Checkbox is first, and FieldContent holds the FieldLabel and the FieldDescription beside it.

What does the description say?

The label reads Sync Desktop & Documents folders. The description says those folders are being synced with iCloud Drive and can be opened from other devices.

Does the box start checked?

Yes. The checkbox sets defaultChecked, so the row starts on. max-w-md caps the row.

How does the label connect to the box?

FieldLabel names the checkbox. Field connects the two for you, with no ids to write. FieldContent only groups that label with the description so they stack beside the box.

Why does the description sit under the label?

FieldContent is a column, so Sync Desktop & Documents folders stays above the iCloud sentence, and that pair sits beside the checkbox.

Which key toggles the checkbox?

Space activates the focused checkbox. The description is text in the row, and Field does not add arrow-key behavior of its own.

API Reference

Field

Sets orientation="horizontal". The rest is on the Field page.

Checkbox

Sets defaultChecked. The rest is on the Checkbox page.

All 38 field examples