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

Copy Markdown View Source

A checkbox group component that displays checkboxes as interactive cards, with support for various sizes, variants, and colors.

Wraps EssenceUI.Primitives.CheckboxGroup.

Examples

<.checkbox_cards_root default_value={["1"]} columns="3">
  <.checkbox_cards_item value="1">
    <.flex direction="column" width="100%">
      <.text weight="bold">A1 Keyboard</.text>
      <.text>US Layout</.text>
    </.flex>
  </.checkbox_cards_item>
  <.checkbox_cards_item value="2">
    <.flex direction="column" width="100%">
      <.text weight="bold">Pro Mouse</.text>
      <.text>Zero-lag wireless</.text>
    </.flex>
  </.checkbox_cards_item>
</.checkbox_cards_root>

Root Props

  • size - Cards size: "1", "2", "3" (default: "2")
  • variant - Visual variant: "surface", "classic" (default: "surface")
  • color - Color theme from accent color palette (default: none)
  • high_contrast - Increase color contrast (default: false)
  • columns - Number of columns: "1"-"9" or CSS value (responsive supported)
  • gap - Gap between cards (responsive supported)
  • default_value - Initial checked values as list of strings
  • Plus margin props (m, mx, my, mt, mr, mb, ml) for spacing control

Item Props

  • value - Value for this checkbox item (required)
  • disabled - Whether this item is disabled

Summary

Functions

checkbox_cards_item(assigns)

Individual checkbox card item. Must be used within checkbox_cards_root.

checkbox_cards_root(assigns)

Root container for checkbox cards. Renders as a grid with checkbox card items.

Functions

checkbox_cards_item(assigns)

Individual checkbox card item. Must be used within checkbox_cards_root.

Attributes

  • id (:string) - Defaults to nil.
  • value (:string) (required) - Value for this checkbox item.
  • disabled (:boolean) - Whether this item is disabled. Defaults to false.
  • checked (:boolean) - Defaults to false.
  • size (:string) - Defaults to "2". Must be one of "1", "2", or "3".
  • high_contrast (:boolean) - Whether to increase color contrast with the background.
  • class (:string) - Additional CSS classes. Defaults to nil.
  • style (:string) - Defaults to "".
  • Global attributes are accepted. Additional attributes.

Slots

  • inner_block (required)

checkbox_cards_root(assigns)

Root container for checkbox cards. Renders as a grid with checkbox card items.

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'}.
  • gap (:string) - Gap utility class (0-9, -1 to -9). Must be one of "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "-1", "-2", "-3", "-4", "-5", "-6", "-7", "-8", or "-9".
  • gap_y (:string) - Column gap utility class (0-9, -1 to -9). Must be one of "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "-1", "-2", "-3", "-4", "-5", "-6", "-7", "-8", or "-9".
  • gap_x (:string) - Row gap utility class (0-9, -1 to -9). Must be one of "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "-1", "-2", "-3", "-4", "-5", "-6", "-7", "-8", or "-9".
  • id (:string) - Defaults to nil.
  • size (:string) - Cards size from 1 to 3. Controls overall dimensions and spacing. Defaults to "2". Must be one of "1", "2", or "3".
  • variant (:string) - Visual style variant. One of 'surface' or 'classic'. Defaults to "surface". Must be one of "surface", or "classic".
  • columns (:any) - Number of columns: 1-9 or CSS value. Responsive supported.
  • value (:list) - Controlled checked values as list of strings. Defaults to nil.
  • default_value (:list) - Initial checked values as list of strings. Defaults to [].
  • name (:string) - Defaults to nil.
  • disabled (:boolean) - Defaults to false.
  • required (:boolean) - Defaults to false.
  • on_value_change (:string) - 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. Supports all globals plus: ["dir"].

Slots

  • inner_block (required)