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

Copy Markdown View Source

A group of checkboxes with support for various sizes, variants, and colors. Wraps EssenceUI.Primitives.CheckboxGroup.

Examples

<.checkbox_group_root id="interests" name="interests" default_value={["coding"]}>
  <.checkbox_group_item value="coding">Coding</.checkbox_group_item>
  <.checkbox_group_item value="music">Music</.checkbox_group_item>
</.checkbox_group_root>

<.checkbox_group name="roles[]" size="3" variant="soft" color="blue" default_value={["admin"]}>
  <:item value="admin">Admin</:item>
  <:item value="editor">Editor</:item>
</.checkbox_group>

Props

  • size - Checkbox size: "1", "2", "3" (default: "2")
  • variant - Visual variant: "surface", "classic", "soft" (default: "surface")
  • color - Color theme from accent color palette (default: none)
  • high_contrast - Increase color contrast (default: false)
  • default_value - Initial selected values (list of strings)
  • value - Controlled selected values (list of strings)
  • disabled - Whether the entire group is disabled
  • name - Form name attribute
  • Plus margin props (m, mx, my, mt, mr, mb, ml) for spacing control

Summary

Functions

checkbox_group(assigns)

Convenience slot-based checkbox group. Maps <:item> slots into root + items, passing size/variant/color/high_contrast from the root into each item.

checkbox_group_item(assigns)

An item in the checkbox group.

checkbox_group_root(assigns)

The root container for the checkbox group.

Functions

checkbox_group(assigns)

Convenience slot-based checkbox group. Maps <:item> slots into root + items, passing size/variant/color/high_contrast from the root into each item.

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 button 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_value (:list) - Initial selected values. Defaults to [].
  • value (:list) - Controlled selected values. Defaults to nil.
  • disabled (:boolean) - Whether the entire checkbox group is disabled. Defaults to false.
  • name (:string) (required) - Form name attribute for the checkbox group.
  • 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 and event handlers. Supports all globals plus: ["form", "aria-label", "aria-labelledby", "aria-describedby", "dir"].

Slots

  • item (required) - Checkbox group item. Accepts attributes:
    • value (:string) (required)
    • disabled (:boolean)

checkbox_group_item(assigns)

An item in the checkbox group.

Attributes

  • id (:string) - Defaults to nil.
  • value (:string) (required)
  • disabled (:boolean) - Defaults to false.
  • checked (:boolean) - Defaults to false.
  • size (:string) - Defaults to "2". Must be one of "1", "2", or "3".
  • variant (:string) - Defaults to "surface". Must be one of "surface", "classic", or "soft".
  • 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'}.
  • class (:string) - Defaults to nil.
  • style (:string) - Defaults to "".
  • Global attributes are accepted.

Slots

  • inner_block

checkbox_group_root(assigns)

The root container for the checkbox group.

Attributes

  • id (:string) - Defaults to nil.
  • size (:string) - Defaults to "2". Must be one of "1", "2", or "3".
  • variant (:string) - Defaults to "surface". Must be one of "surface", "classic", or "soft".
  • value (:list) - Defaults to nil.
  • default_value (:list) - Defaults to [].
  • on_value_change (:string) - Defaults to nil.
  • disabled (:boolean) - Defaults to false.
  • name (:string) - Defaults to nil.
  • required (:boolean) - Defaults to false.
  • orientation (:string) - Defaults to "vertical". Must be one of "horizontal", or "vertical".
  • 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'}.
  • class (:string) - Defaults to nil.
  • style (:string) - Defaults to "".
  • Global attributes are accepted. Supports all globals plus: ["dir", "form", "aria-label", "aria-labelledby", "aria-describedby"].

Slots

  • inner_block (required)