Checkbox
Select multiple options from a list of choices.
<.checkbox field={f[:elixir]} label="Elixir" value="elixir" />Checkbox Group
Create a set of related checkboxes linked to a single backend field.
<.checkbox_group field={f[:languages]} label="Languages" description="Select your favorite languages">
<:checkbox label="Elixir" value="elixir" />
<:checkbox label="Clojure" value="clojure" />
<:checkbox label="Haskell" value="haskell" />
</.checkbox_group>Description
Add context below labels and above checkboxes for additional guidance.
<.form :let={f} for={%{}}>
<.checkbox
field={f[:elixir]}
checked
label="Elixir"
value="elixir"
description="Concurrent, fault-tolerant language."
/>
<.checkbox
field={f[:clojure]}
checked
label="Clojure"
value="clojure"
description="Functional language for the JVM."
/>
<.checkbox
field={f[:haskell]}
label="Haskell"
value="haskell"
description="Purely functional, statically typed language."
/>
</.form>Sublabel
Include sublabels with checkbox labels for supplementary information.
<.form :let={f} for={%{}}>
<.checkbox field={f[:elixir]} label="Elixir" value="elixir" sublabel="Concurrent functional programming" />
<.checkbox field={f[:clojure]} label="Clojure" value="clojure" sublabel="Functional JVM language" />
<.checkbox field={f[:haskell]} label="Haskell" value="haskell" sublabel="Purely functional language" />
</.form>Disabled
Show checkboxes in a disabled state for unavailable options.
<.form :let={f} for={%{}}>
<.checkbox
type="checkbox"
checked
disabled
field={f[:elixir]}
label="Elixir"
value="elixir"
description="Concurrent, fault-tolerant language."
/>
<.checkbox
type="checkbox"
disabled
field={f[:cpp]}
label="C++"
value="c++"
description="High-performance, compiled language."
/>
</.form>Error
Display validation feedback for checkboxes with error states.
<.form
:let={f}
for={
to_form(%{"ruby_on_rails" => "true", "nextjs" => "true"},
errors: [
ruby_on_rails: {"At least 500 cores is required", []},
nextjs: {"At least 2GB needed for the bundle is required", []}
]
)
}
>
<.checkbox field={f[:phoenix]} label="Phoenix" sublabel="Web framework for Elixir" />
<.checkbox field={f[:ruby_on_rails]} label="Ruby on Rails" sublabel="Web framework for Ruby"/>
<.checkbox field={f[:nextjs]} label="Next.js" sublabel="React framework for production" />
</.form>Customization
Style checkboxes to fit your design while maintaining functionality.
<!-- color: text-red-600 -->
<.checkbox name="elixir" label="Elixir" value="elixir" class="text-red-600" checked />
<!-- size: size-5 -->
<.checkbox name="haskell" label="Haskell" value="haskell" class="size-5" />Card variant
Apply card styling to individual checkboxes for a bordered appearance.
<.checkbox
field={f[:frontend]}
variant="card"
label="Frontend"
sublabel="Web Technologies"
description="HTML, CSS, JavaScript"
value="frontend"
/>Checkbox group
Apply card styling to grouped checkboxes for organized option sets.
<.checkbox_group
variant="card"
label="Programming Languages"
description="Select your favorite programming languages"
field={f[:languages]}
class="grid grid-cols-3 gap-2"
>
<:checkbox value="elixir" label="Elixir" />
<:checkbox value="javascript" label="JavaScript" />
<:checkbox value="python" label="Python" />
<:checkbox value="ruby" label="Ruby" />
<:checkbox value="rust" label="Rust" />
<:checkbox value="go" label="Go" />
</.checkbox_group>Control position
Position the checkbox control on either side of the card content.
<.checkbox
control="left"
field={f[:frontend]}
variant="card"
label="Frontend"
sublabel="Web Technologies"
description="HTML, CSS, JavaScript"
value="frontend"
/>
<.checkbox
control="right"
field={f[:backend]}
variant="card"
label="Backend"
sublabel="Server Technologies"
description="Elixir, Phoenix, PostgreSQL"
value="backend"
/>Custom content
Use custom content to enhance the visual appeal of card checkboxes.
<.checkbox_group
field={f[:categories]}
variant="card"
label="Categories"
description="Select your favorite categories"
class="grid grid-cols-3"
>
<:checkbox
:for={
{label, value, icon} <- [
{"Web Design", "web_design", "hero-window"},
{"UI/UX Design", "ui_ux", "hero-pencil-square"},
{"Desktop", "desktop", "hero-computer-desktop"},
{"SEO", "seo", "hero-magnifying-glass"},
{"Artificial Intelligence", "ai", "hero-sparkles"},
{"Development", "development", "hero-code-bracket-square"}
]
}
value={value}
class="flex-1 relative group has-checked:border-blue-500 has-checked:bg-blue-50 dark:border-zinc-700 dark:bg-zinc-800 dark:has-checked:bg-blue-950"
>
<.icon
name="hero-check-circle-solid"
class="group-has-checked:block hidden absolute top-2 right-2 size-6 text-zinc-500 dark:text-zinc-400 group-has-checked:text-blue-500"
/>
<div class="flex flex-col items-center justify-center w-full gap-2">
<.icon name={icon} class="size-6 text-zinc-500 dark:text-zinc-400 group-has-checked:text-blue-500" />
<span class="font-medium text-sm group-has-checked:text-blue-600 dark:text-zinc-300 dark:group-has-checked:text-zinc-100">
{label}
</span>
</div>
</:checkbox>
</.checkbox_group>Customization
Style card checkboxes to match your design system while maintaining functionality.
Select the days of the week you want to work
Select the days of the week you want to work
Select the tags you want to apply to your project
Select the tags you want to apply to your project
<.checkbox_group
label="Weekdays"
description="Select the days of the week you want to work"
name="weekdays"
value={["mon", "tue", "wed"]}
variant="card"
class="flex gap-x-2"
>
<:checkbox
:for={
{label, value} <- [
{"S", "sun"},
{"M", "mon"},
{"T", "tue"},
{"W", "wed"},
{"T", "thu"},
{"F", "fri"},
{"S", "sat"}
]
}
label={label}
value={value}
class="flex items-center justify-center rounded-full has-checked:border-zinc-300 has-checked:bg-zinc-100 text-zinc-700 has-checked:text-white size-10"
/>
</.checkbox_group>
<.checkbox_group
label="Tags"
description="Select the tags you want to apply to your project"
name="tags"
variant="card"
class="flex flex-wrap w-96"
>
<:checkbox
:for={
{label, value} <- [
{"Modern", "modern"},
{"Minimalist", "minimalist"},
{"Vintage", "vintage"},
{"Retro", "retro"},
{"Elegant", "elegant"},
{"Classic", "classic"},
{"Contemporary", "contemporary"},
{"Industrial", "industrial"},
{"Rustic", "rustic"},
{"Bohemian", "bohemian"}
]
}
class="text-sm text-zinc-700 flex items-center justify-center font-medium gap-1 px-2.5 py-0.5 rounded-full group has-checked:bg-green-100 has-checked:border-green-500 has-checked:text-green-800"
value={value}
>
<.icon name="hero-check" class="size-4 group-has-checked:block hidden" /> {label}
</:checkbox>
</.checkbox_group>