SutraUI.Checkbox (Sutra UI v0.2.0)

View Source

A control that allows the user to toggle between checked and not checked.

Examples

<.checkbox name="terms" value="accepted" />

<.checkbox name="terms" value="accepted" checked />

<.checkbox name="newsletter" value="subscribed" disabled />

<.checkbox name="agree" id="agree-checkbox" required aria-describedby="agree-help" />

Accessibility

  • Uses semantic <input type="checkbox"> element
  • Supports aria-invalid for error states
  • Supports aria-describedby for helper text and errors
  • Properly associates with labels via id and for attributes
  • Respects disabled and required states
  • Keyboard accessible (Space to toggle)

Summary

Functions

checkbox(assigns)

Renders a checkbox input element.

Functions

checkbox(assigns)

Renders a checkbox input element.

Examples

<.checkbox name="terms" value="accepted" />
<.checkbox name="terms" value="accepted" checked />
<.checkbox name="terms" value="accepted" disabled />

Attributes

  • name (:string) (required) - The name attribute for the checkbox input.
  • value (:string) - The value attribute for the checkbox input. Defaults to "true".
  • checked (:boolean) - Whether the checkbox is checked. Defaults to false.
  • disabled (:boolean) - Whether the checkbox is disabled. Defaults to false.
  • class (:string) - Additional CSS classes. Defaults to nil.
  • Global attributes are accepted. Additional HTML attributes including ARIA. Supports all globals plus: ["id", "form", "required", "aria-invalid", "aria-describedby", "aria-required"].