shadcn.io is an independent project built on shadcn/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 React, Ark UI does not record the agreement.
Installation
Anatomy
Usage
<Field className="max-w-md" orientation="horizontal">
<Checkbox />
<FieldLabel className="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.
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.
