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

Copy Markdown View Source

A SegmentedControl for selecting one option from a group of related options. Wraps EssenceUI.Primitives.ToggleGroup (single, non-deselectable), matching Radix Themes.

Examples

<.segmented_control id="mail" value="inbox" on_change="mail_changed">
  <:option value="inbox">Inbox</:option>
  <:option value="drafts">Drafts</:option>
  <:option value="sent">Sent</:option>
</.segmented_control>

<.segmented_control_root id="tabs" size="3" variant="classic" color="blue" value="tab1">
  <.segmented_control_item value="tab1">Tab 1</.segmented_control_item>
  <.segmented_control_item value="tab2">Tab 2</.segmented_control_item>
</.segmented_control_root>

Props

  • size - Control size: "1", "2", "3" (default: "2")
  • variant - Visual variant: "surface", "classic" (default: "surface")
  • radius - Border radius: "none", "small", "medium", "large", "full"
  • color - Color theme from accent color palette
  • high_contrast - Increase color contrast (default: false)
  • value - Controlled selected value
  • default_value - Initial selected value
  • on_change - LiveView event name when selection changes
  • disabled - Whether the control is disabled
  • Plus layout props for positioning

Summary

Functions

segmented_control(assigns)

Convenience slot-based segmented control. Maps <:option> slots into root + items.

segmented_control_item(assigns)

A single item within a SegmentedControl.

segmented_control_root(assigns)

The root container for the segmented control.

Functions

segmented_control(assigns)

Convenience slot-based segmented control. Maps <:option> slots into root + 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.
  • radius (:string) - Border radius utility. Accepts: none, small, medium, large, full. Responsive supported. Must be one of "none", "small", "medium", "large", or "full".
  • 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", or "classic".
  • value (:string) - Defaults to nil.
  • default_value (:string) - Defaults to nil.
  • on_change (:string) - Defaults to nil.
  • disabled (:boolean) - Defaults to false.
  • class (:string) - Defaults to nil.
  • style (:string) - Defaults to "".
  • Global attributes are accepted. Global attributes and event handlers. Supports all globals plus: ["form", "required", "aria-label", "aria-labelledby", "aria-describedby"].

Slots

  • option (required) - Segmented control options. Accepts attributes:
    • value (:string) (required)

segmented_control_item(assigns)

A single item within a SegmentedControl.

Attributes

  • id (:string) - Defaults to nil.
  • value (:string) (required) - The value this item represents.
  • 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"].

Slots

  • inner_block (required) - The content to display for this item.

segmented_control_root(assigns)

The root container for the segmented control.

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", or "classic".
  • value (:string) - Defaults to nil.
  • default_value (:string) - Defaults to nil.
  • on_change (:string) - Defaults to nil.
  • disabled (:boolean) - Defaults to false.
  • 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.
  • p (:any) - Padding utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • px (:any) - Padding utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • py (:any) - Padding utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • pt (:any) - Padding utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • pr (:any) - Padding utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • pb (:any) - Padding utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • pl (:any) - Padding utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • width (:any) - Width utility class string or map. 100px or %{xs: '100px', sm: '200px'}.
  • max_width (:any) - Max width utility class string or map. 100px or %{xs: '100px', sm: '200px'}.
  • min_width (:any) - Min width utility class string or map. 100px or %{xs: '100px', sm: '200px'}.
  • height (:any) - Height utility class string or map. 100px or %{xs: '100px', sm: '200px'}.
  • max_height (:any) - Max height utility class string or map. 100px or %{xs: '100px', sm: '200px'}.
  • min_height (:any) - Min height utility class string or map. 100px or %{xs: '100px', sm: '200px'}.
  • position (:string) - CSS position property. Responsive supported. Must be one of "static", "relative", "absolute", "fixed", or "sticky".
  • inset (:string) - CSS inset property. Accepts scale values, CSS strings, responsive. Must be one of "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "-1", "-2", "-3", "-4", "-5", "-6", "-7", "-8", or "-9".
  • top (:string) - CSS top property. Accepts scale values, CSS strings, responsive. Must be one of "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "-1", "-2", "-3", "-4", "-5", "-6", "-7", "-8", or "-9".
  • right (:string) - CSS right property. Accepts scale values, CSS strings, responsive. Must be one of "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "-1", "-2", "-3", "-4", "-5", "-6", "-7", "-8", or "-9".
  • bottom (:string) - CSS bottom property. Accepts scale values, CSS strings, responsive. Must be one of "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "-1", "-2", "-3", "-4", "-5", "-6", "-7", "-8", or "-9".
  • left (:string) - CSS left property. Accepts scale values, CSS strings, responsive. Must be one of "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "-1", "-2", "-3", "-4", "-5", "-6", "-7", "-8", or "-9".
  • overflow (:string) - CSS overflow property. Responsive supported. Must be one of "visible", "hidden", "clip", "scroll", or "auto".
  • overflow_x (:string) - CSS overflow-x property. Responsive supported. Must be one of "visible", "hidden", "clip", "scroll", or "auto".
  • overflow_y (:string) - CSS overflow-y property. Responsive supported. Must be one of "visible", "hidden", "clip", "scroll", or "auto".
  • flex_basis (:string) - CSS flex-basis property. Responsive supported.
  • flex_shrink (:string) - CSS flex-shrink property. Responsive supported. Must be one of "0", or "1".
  • flex_grow (:string) - CSS flex-grow property. Responsive supported. Must be one of "0", or "1".
  • grid_area (:string) - CSS grid-area property. Responsive supported.
  • grid_column (:string) - CSS grid-column property. Responsive supported.
  • grid_column_start (:string) - CSS grid-column-start property. Responsive supported.
  • grid_column_end (:string) - CSS grid-column-end property. Responsive supported.
  • grid_row (:string) - CSS grid-row property. Responsive supported.
  • grid_row_start (:string) - CSS grid-row-start property. Responsive supported.
  • grid_row_end (:string) - CSS grid-row-end property. Responsive supported.
  • radius (:string) - Border radius utility. Accepts: none, small, medium, large, full. Responsive supported. Must be one of "none", "small", "medium", "large", or "full".
  • class (:string) - Defaults to nil.
  • style (:string) - Defaults to "".
  • Global attributes are accepted. Global attributes and event handlers. Supports all globals plus: ["form", "required", "aria-label", "aria-labelledby", "aria-describedby"].

Slots

  • inner_block (required)