shadcn.io is an independent project built on shadcn/ui
Monday, Tuesday, Wednesday, Thursday and Friday sit in one row, each with a checkbox and a label. The row wraps onto a second line when it runs out of room.
Use a row for short labels such as weekdays or sizes. Stack them, or use a Toggle Group, when they should read as one control. Ark UI in Solid does not place the days in a row.
Installation
Anatomy
Usage
<div class="flex flex-wrap gap-4">
{days.map(day => <Field class="w-fit" orientation="horizontal">
<Checkbox name={day.id} />
<FieldLabel>{day.label}</FieldLabel>
</Field>)}
</div>FAQ
When should I use horizontal vs vertical checkbox lists?
Horizontal suits a handful of options with one-word labels, like these five weekdays. Stack the fields in a FieldGroup when the list is longer or the labels wrap inside the row.
How does flex-wrap handle different screen sizes?
The row puts as many days on a line as fit and moves the rest to the next, with no breakpoints. gap-4 keeps the same spacing across and between lines. Each field is w-fit, so it's as wide as its label rather than the full row.
How do I center or right-align horizontal checkbox lists?
Add justify-center or justify-end to the row; every wrapped line aligns the same way. justify-end follows the reading direction, so it puts the days on the left in a right-to-left page.
Should horizontal lists stay horizontal on mobile?
For short labels like these, yes: wrapping handles narrow screens. For longer labels, stack them on small screens with flex-col sm:flex-row. If people mis-tap neighbors, give the row more gap or go vertical.
API Reference
Field
Sets orientation="horizontal". The rest is on the Field page.
Checkbox
Sets name={day.id}. The rest is on the Checkbox page.
