Checkbox

<.checkbox name="terms" />

With Label

Combine with the Field component or a label element for better accessibility.

<div class="flex items-center gap-2">
  <.checkbox name="agree" id="agree-checkbox" />
  <label for="agree-checkbox">
    I agree to the terms and conditions
  </label>
</div>

Checked State

Use the checked attribute to set the initial state.

<.checkbox name="notifications" checked />

Disabled

Use the disabled attribute to prevent interaction.

<.checkbox name="disabled1" disabled />
<.checkbox name="disabled2" checked disabled />

With Form

Checkboxes integrate with Phoenix forms. The checkbox will submit "true" when checked.

<.form for={@form} phx-submit="save">
  <div class="flex items-center gap-2">
    <.checkbox name={@form[:remember_me].name} id="remember-me" />
    <label for="remember-me">Remember me</label>
  </div>
  <.button type="submit">Login</.button>
</.form>