PhiaUi.Components.SegmentedControl (phia_ui v0.1.17)

Copy Markdown View Source

Segmented control component for Phoenix LiveView.

Renders a set of mutually-exclusive options as pill-style tabs. Each segment is a hidden radio input + visible label styled with Tailwind semantic tokens. The active segment is highlighted server-side based on the :value attribute — no JavaScript required.

Enhancements

  • :orientation — :horizontal (default) or :vertical (stacks segments)
  • icon key in segment maps — renders an icon before the label

API

<.segmented_control
  id="view-mode"
  name="view"
  value={@view}
  on_change="change_view"
  segments={[
    %{value: "list", label: "List"},
    %{value: "grid", label: "Grid", icon: "grid-2x2"},
    %{value: "kanban", label: "Kanban"}
  ]}
/>

<%!-- Vertical layout --%>
<.segmented_control
  id="nav"
  name="nav"
  value={@section}
  orientation={:vertical}
  on_change="set_section"
  segments={[
    %{value: "profile", label: "Profile"},
    %{value: "security", label: "Security"}
  ]}
/>

Summary

Functions

segmented_control(assigns)

Renders a segmented control — a group of mutually-exclusive tab-style buttons.

Functions

segmented_control(assigns)

Renders a segmented control — a group of mutually-exclusive tab-style buttons.

Attributes

  • id (:string) (required) - Unique HTML id for the container.

  • name (:string) (required) - HTML name attribute shared by all radio inputs.

  • value (:string) - The currently selected segment value. Defaults to nil.

  • on_change (:string) - LiveView event name dispatched via phx-click when a segment label is clicked. Defaults to nil.

  • size (:atom) - Size variant controlling label padding and font size. Defaults to :default. Must be one of :sm, :default, or :lg.

  • orientation (:atom) - Layout orientation — :horizontal (default) or :vertical (stacks segments). Defaults to :horizontal. Must be one of :horizontal, or :vertical.

  • segments (:list) - List of segment maps. Required keys: :value, :label. Optional keys: :disabled (boolean), :icon (Lucide icon name string). Example: [%{value: "a", label: "Alpha", icon: "star"}, %{value: "b", label: "Beta"}]

    Defaults to [].

  • class (:string) - Additional CSS classes merged onto the container <div>. Defaults to nil.

  • Global attributes are accepted. HTML attributes forwarded to the container <div>.