Checkbox

A native checkbox input that is field-aware and pairs well with a label.

Accept terms and conditions

<.checkbox></.checkbox>

Examples

Default

Unchecked and checked states side by side.

Accept terms and conditions Already agreed

<div class="flex flex-col gap-3">
  <label class="flex items-center gap-2">
    <.checkbox field={Phoenix.Component.to_form(%{"agree" => false})[:agree]} />
    <span class="text-sm">Accept terms and conditions</span>
  </label>
  <label class="flex items-center gap-2">
    <.checkbox field={Phoenix.Component.to_form(%{"agreed" => true})[:agreed]} />
    <span class="text-sm">Already agreed</span>
  </label>
</div>

Show code

Disabled

Pass the disabled global to prevent interaction.

Cannot be changed

<label class="flex items-center gap-2">
  <.checkbox field={Phoenix.Component.to_form(%{"locked" => true})[:locked]} disabled />
  <span class="text-sm text-muted-foreground">Cannot be changed</span>
</label>

Props

Name	Type	Default	Values
class	:string
field	{:struct, Phoenix.HTML.FormField}
rest	:global