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

Copy Markdown View Source

A simple, accessible Radio component for single selection within a group with support for various sizes, variants, and colors. This is a styled native <input type="radio"> (not a wrap of Primitives.RadioGroup — use radio_group for the compound API).

Examples

<.radio name="size" value="small" />

<.radio name="size" value="medium" checked />

<.radio name="size" value="large" size="3" variant="soft" color="blue" />

<.radio name="theme" value="dark" disabled />

Props

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

Summary

Functions

radio(assigns)

Functions

radio(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'}.
  • size (:string) - Radio 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 (:boolean) - Initial checked state. If true, radio starts checked. Defaults to false.
  • checked (:boolean) - Controlled checked state. Defaults to nil.
  • disabled (:boolean) - Whether the radio is disabled. Defaults to false.
  • name (:string) (required) - Form name attribute for grouping radios.
  • value (:string) (required) - Form value attribute.
  • 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: ["id", "form", "required", "aria-label", "aria-labelledby", "aria-describedby"].