Checkbox Group
Requires JS
A list of checkboxes grouped together
What kind of site are you building?
Note: Unlike radios, checkboxes can have none, one or many selected at a time. Typically this means the checkboxes can manage their own state.
This is a set of example components that could be useful when building out a variety of forms. As these are highly dependent on the context they’ll be used in, it’s very unlikely you’ll need all of them so I’ve instead separated these out into examples.
To use these components, copy the code from the code preview and paste it into your project.
Initialization
In order to use these components you’ll need one of the following imports
import { Checkbox } from "#/ui/components/Checkbox"
import { CheckboxCard } from "#/ui/components/CheckboxCard"Simple list
How do you prefer to receive notifications?
<div>
<label className="text-base font-semibold text-gray-900">Notifications</label>
<p className="text-sm text-gray-500">How do you prefer to receive notifications?</p>
<fieldset className="mt-4">
<legend className="sr-only">Notification method</legend>
<div className="flex gap-4 items-center flex-col">
<Checkbox label="One" />
<Checkbox label="Two" />
<Checkbox label="Three" />
</div>
</fieldset>
</div>List with description
How do you prefer to receive notifications?
<div>
<label className="text-base font-semibold text-gray-900">Notifications</label>
<p className="text-sm text-gray-500">How do you prefer to receive notifications?</p>
<fieldset className="mt-4">
<legend className="sr-only">Notification method</legend>
<div className="flex gap-4 flex-col ">
<div className="flex items-start gap-3">
<Checkbox id="one" className="mt-0.5" />
<div className="flex items-start flex-col leading-tight">
<label for="one">One</label>
<p className="text-sm text-gray-500">
{"A marketing or docs site for presenting information"}
</p>
</div>
</div>
<div className="flex items-start gap-3">
<Checkbox id="one" className="mt-0.5" />
<div className="flex items-start flex-col leading-tight">
<label for="one">One</label>
<p className="text-sm text-gray-500">
{"A marketing or docs site for presenting information"}
</p>
</div>
</div>
<div className="flex items-start gap-3">
<Checkbox id="one" className="mt-0.5" />
<div className="flex items-start flex-col leading-tight">
<label for="one">One</label>
<p className="text-sm text-gray-500">
{"A marketing or docs site for presenting information"}
</p>
</div>
</div>
</div>
</fieldset>
</div>Color picker
<div>
<label className="text-base font-semibold text-gray-900">Choose your colors</label>
<fieldset className="mt-4">
<legend className="sr-only">Color picker</legend>
<div className="flex gap-4">
<CheckboxCard className="rounded-full border-none size-8 bg-red-500 hover:bg-red-400 aria-selected:outline-2 aria-selected:outline-indigo-500 outline-offset-2" />
<CheckboxCard className="rounded-full border-none size-8 bg-blue-500 hover:bg-blue-400 aria-selected:outline-2 aria-selected:outline-indigo-500 outline-offset-2" />
<CheckboxCard className="rounded-full border-none size-8 bg-green-500 hover:bg-green-400 aria-selected:outline-2 aria-selected:outline-indigo-500 outline-offset-2" />
<CheckboxCard className="rounded-full border-none size-8 bg-fuchsia-500 hover:bg-fuchsia-400 aria-selected:outline-2 aria-selected:outline-indigo-500 outline-offset-2" />
</div>
</fieldset>
</div>Small cards
<div>
<label className="text-base font-semibold text-gray-900">What's your budget?</label>
<fieldset className="mt-4">
<legend className="sr-only">Budget picker</legend>
<div className="flex gap-4">
<CheckboxCard className="aria-checked:bg-indigo-500 aria-checked:text-white" client:load>
$100
</CheckboxCard>
<CheckboxCard className="aria-checked:bg-indigo-500 aria-checked:text-white" client:load>
$1000
</CheckboxCard>
<CheckboxCard className="aria-checked:bg-indigo-500 aria-checked:text-white" client:load>
$10000
</CheckboxCard>
<CheckboxCard className="aria-checked:bg-indigo-500 aria-checked:text-white " client:load>
$100000
</CheckboxCard>
</div>
</fieldset>
</div>Cards
<div>
<label className="text-base font-semibold text-gray-900">
What kind of site are you building?
</label>
<fieldset className="mt-4">
<legend className="sr-only">Site selector</legend>
<div className="flex gap-4 flex-col">
<div className="flex gap-4">
<CheckboxCard
client:load
defaultChecked
showCheckbox
className="flex items-start flex-1"
>
<div className="text-left flex-1">
<label htmlFor="custom-checkbox" className="font-bold">
Website
</label>
<p className="text-sm text-gray-500">
{"A marketing or docs site for presenting information"}
</p>
</div>
</CheckboxCard>
<CheckboxCard client:load showCheckbox className="flex items-start flex-1">
<div className="text-left flex-1">
<label htmlFor="custom-checkbox" className="font-bold">
Application
</label>
<p className="text-sm text-gray-500">
{"A web application to manage stuff with your account"}
</p>
</div>
</CheckboxCard>
<CheckboxCard
client:load
defaultChecked
showCheckbox
className="flex items-start flex-1"
>
<div className="text-left flex-1">
<label htmlFor="custom-checkbox" className="font-bold">
Ecommerce
</label>
<p className="text-sm text-gray-500">Buy or sell things</p>
</div>
</CheckboxCard>
</div>
</div>
</fieldset>
</div>