Shadix.Components.ToggleGroup (shadix v0.0.1)

Copy Markdown View Source

Toggle group component translated from shadcn/ui (new-york-v4).

A set of two-state toggle buttons. Unlike the React/Radix original, selection state is uncontrolled and managed entirely on the client by the ShadixToggleGroup hook (assets/ts/toggle_group.ts): clicking an item flips its aria-pressed and data-state (on/off). The group's data-type decides the selection model:

  • "single" — radio-like; at most one item is on. Clicking an item turns the others off; clicking the active item again turns it off.
  • "multiple" — each item toggles independently.

Item visuals reuse the toggle (toggle.tsx) classes, keyed off data-state=on. There is no server round-trip; the hook is needed because plain Phoenix.LiveView.JS cannot read/flip a boolean state attribute across siblings.

Caller-supplied class is appended last; Tailwind cascade layers ensure it wins over the defaults.

Summary

Functions

toggle_group(assigns)

Renders the toggle-group container.

toggle_group_item(assigns)

Renders a single toggle button within a toggle_group/1.

Functions

toggle_group(assigns)

Renders the toggle-group container.

Carries role="group", the ShadixToggleGroup hook, and data-type ("single" or "multiple") that the hook reads to decide the selection model.

Attributes

  • id (:string) (required)
  • type (:string) - Defaults to "single". Must be one of "single", or "multiple".
  • variant (:string) - Defaults to "default". Must be one of "default", or "outline".
  • size (:string) - Defaults to "default". Must be one of "default", "sm", or "lg".
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

toggle_group_item(assigns)

Renders a single toggle button within a toggle_group/1.

Starts in the off state (aria-pressed="false", data-state="off"); the ShadixToggleGroup hook flips both on click. Pass disabled (or any global attribute) via the rest.

Attributes

  • value (:string) (required)
  • variant (:string) - Defaults to "default". Must be one of "default", or "outline".
  • size (:string) - Defaults to "default". Must be one of "default", "sm", or "lg".
  • class (:string) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["disabled"].

Slots

  • inner_block (required)