EssenceUI.Components.Checkbox (Essence UI v0.2.0)

Copy Markdown View Source

A simple, accessible Checkbox component for toggling between checked, unchecked, and indeterminate states with support for various sizes, variants, and colors. The checkbox provides visual feedback for user selections and can be used in forms, settings panels, and interactive lists.

Examples

<.checkbox />

<.checkbox checked />

<.checkbox size="3" variant="soft" color="blue" />

<.checkbox checked="indeterminate" />

<.checkbox disabled />

<.checkbox name="newsletter" value="subscribe" checked />

Props

  • size - Checkbox size: "1", "2", "3" (default: "2")
  • variant - Checkbox variant: "surface", "classic", "soft" (default: "surface")
  • color - Color theme from accent color palette (default: none)
  • high_contrast - Increase color contrast (default: false)
  • checked - Controlled checked state (true/false/"indeterminate")
  • disabled - Whether the checkbox is disabled
  • name - Form name attribute
  • value - Form value attribute
  • Plus margin props (m, mx, my, mt, mr, mb, ml) for spacing control

Summary

Functions

checkbox(assigns)

Functions

checkbox(assigns)

Attributes

  • color (:string) - Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky. Must be one of "gray", "gold", "bronze", "brown", "yellow", "amber", "orange", "tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "indigo", "blue", "cyan", "teal", "jade", "green", "grass", "lime", "mint", or "sky".
  • high_contrast (:boolean) - Whether to increase color contrast with the background.
  • m (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • mx (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • my (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • mt (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • mr (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • mb (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • ml (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • id (:string) - Defaults to nil.
  • size (:string) - Checkbox size from 1 to 3. Controls overall dimensions and indicator size. Defaults to "2". Must be one of "1", "2", or "3".
  • variant (:string) - Visual style variant. One of 'surface', 'classic', or 'soft'. Defaults to "surface". Must be one of "surface", "classic", or "soft".
  • default_checked (:any) - Initial checked state. If true, checkbox starts checked. Defaults to false.
  • checked (:any) - Controlled checked state. Can be true, false, or 'indeterminate'. Defaults to nil.
  • disabled (:boolean) - Whether the checkbox is disabled. Defaults to false.
  • required (:boolean) - Whether the checkbox is required. Defaults to false.
  • form (:string) - The form ID this checkbox belongs to. Defaults to nil.
  • on_checked_change (:string) - LiveView event to push when the checked state changes. Defaults to nil.
  • name (:string) - Form name attribute. Defaults to nil.
  • value (:string) - Form value attribute. Defaults to nil.
  • class (:string) - Additional CSS classes to add to the element. Defaults to nil.
  • style (:string) - Defaults to "".
  • Global attributes are accepted. Global attributes and event handlers. Supports all globals plus: ["aria-label", "aria-labelledby", "aria-describedby"].