PineUiPhoenix.Components.Checkbox (Pine UI v0.2.1)

Copy Markdown View Source

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

checkbox(assigns)

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 to nil.

  • name (:string) (required)

  • value (:string) - Submitted when checked. Defaults to "true".

  • checked (:boolean) - Defaults to false.

  • disabled (:boolean) - Defaults to false.

  • required (:boolean) - Defaults to false.

  • label (:string) - Defaults to nil.

  • description (:string) - Helper text beneath the label. Defaults to nil.

  • error (:string) - Validation message. Sets aria-invalid. Defaults to nil.

  • hidden_input (:boolean) - Emits a hidden field carrying false before 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 to nil.

  • Global attributes are accepted.