Checkboxes.
A port of the Pines checkbox. Pure Tailwind —
the tick is drawn by the browser's native accent-color-free styling plus a background
SVG, so no Alpine and no JavaScript is involved.
<.checkbox name="terms" label="I agree to the terms" />
Summary
Forms
Renders a checkbox with an optional label and description.
Forms
Renders a checkbox with an optional label and description.
Examples
<.checkbox name="terms" label="I agree" required />
<.checkbox
name="notify"
label="Email notifications"
description="Get notified when someone mentions you."
checked={@user.notify}
phx-click="toggle-notify"
/>Accessibility
The label is linked with for/id, the description via aria-describedby, and an error
sets aria-invalid and is announced through role="alert".
Attributes
id(:string) - Generated when omitted, so the label stays linked. Defaults tonil.name(:string) (required)value(:string) - Submitted when checked. Defaults to"true".checked(:boolean) - Defaults tofalse.disabled(:boolean) - Defaults tofalse.required(:boolean) - Defaults tofalse.label(:string) - Defaults tonil.description(:string) - Helper text beneath the label. Defaults tonil.error(:string) - Validation message. Setsaria-invalid. Defaults tonil.hidden_input(:boolean) - Emits a hidden field carryingfalsebefore the checkbox, so an unchecked box still submits a value. This is what Phoenix's own form helpers do; turn it off if you are handling the unchecked case yourself.Defaults to
true.class(:string) - Defaults tonil.Global attributes are accepted.