# `PhiaUi.Components.SegmentedControl`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/inputs/segmented_control.ex#L1)

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"}
      ]}
    />

# `segmented_control`

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>`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*