Checkbox · Anatomy
Default structure, indicator, error slot, and indeterminate state.
Hex doc
Phoenix
Minimal
<.checkbox class="checkbox">
<:label>Option</:label>
</.checkbox>
Label and indicator
<.checkbox class="checkbox">
<:label>Accept the terms</:label>
<:indicator>
<.heroicon name="hero-check" />
</:indicator>
</.checkbox>
Invalid
Required
<.checkbox
class="checkbox checkbox--accent"
invalid
checked
errors={["Required"]}
>
<:label>Subscribe</:label>
<:indicator>
<.heroicon name="hero-check" />
</:indicator>
<:error :let={msg}>
<.heroicon name="hero-exclamation-circle" class="icon" />
{msg}
</:error>
</.checkbox>
Indeterminate
<.checkbox class="checkbox" checked={:indeterminate}>
<:label>Select some rows</:label>
<:indicator>
<.heroicon name="hero-check" />
</:indicator>
<:indeterminate>
<.heroicon name="hero-minus" />
</:indeterminate>
</.checkbox>