Skip to content

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

Free

Simple Checkbox Field for Solid

An unchecked box beside I agree to the terms and conditions, with the sentence at normal weight on the same row.

UI library: Ark UI

The box starts off. Beside it, at normal weight: I agree to the terms and conditions. The sentence and the box are one row.

Use it for one agreement on a form. An immediate setting, not a choice you submit later, is a Switch. In Solid, Ark UI does not record the agreement.

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

<Field class="max-w-md" orientation="horizontal">
    <Checkbox />
    <FieldLabel class="font-normal">
      I agree to the terms and conditions
    </FieldLabel>
  </Field>

FAQ

Why is the checkbox beside the sentence?

orientation is horizontal, with the Checkbox first and the FieldLabel beside it. The label reads I agree to the terms and conditions.

Why is the label not bold?

font-normal on FieldLabel keeps the sentence at normal weight. The label is the choice itself.

How does the sentence toggle the checkbox?

FieldLabel names the checkbox, so the sentence is the label for that box. Field connects the two for you, with no ids to write. max-w-md caps the row.

Does the box start checked?

This checkbox passes no default, so it starts off. Start it checked when the common case is already agreed: pass defaultChecked.

How do I add a longer explanation?

Wrap the FieldLabel and a FieldDescription in FieldContent, and keep the Checkbox as the first child of the horizontal Field.

Which key toggles the checkbox?

Space activates the focused checkbox. Field does not add arrow-key behavior of its own.

API Reference

Field

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

Checkbox

No extra props in this demo. The rest is on the Checkbox page.

All 38 field examples