Components Actions

Segmented Button

Material Design 3 segmented button web components (lit-material-segmented-button-group, lit-material-segmented-button).

  • 2.8 KB gzipped
  • @lit-material/segmented-button 0.1.0
  • Renders on the server

Example

Install

npm install @lit-material/segmented-button @lit-material/tokens
import "@lit-material/segmented-button";

Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide

API

<lit-material-segmented-button-group>

Material Design 3 segmented buttons — a connected row of lit-material-segmented-button elements, in either single-select (multiselect false, the default — exactly one segment selected at a time, like a radio group) or multi-select (multiselect true — any number of segments selected independently, like a group of checkboxes) mode.

Properties

PropertyAttributeTypeDefaultDescription
multiselectmultiselectbooleanfalseWhen true, any number of segments may be selected at once (checkbox-like). Defaults to false (radio-like: exactly one at a time).

Events

EventDescription
changeFires when a segment's selected state changes via user interaction.

Slots

SlotDescription
defaultlit-material-segmented-button elements.

<lit-material-segmented-button>

A single segment within lit-material-segmented-button-group. Purely presentational — like lit-material-tab, it has no click handler of its own; the parent group listens for the bubbling click (via event.composedPath(), the same delegation pattern lit-material-tabs uses) and drives selected and the roving tabindex (active) from there.

Properties

PropertyAttributeTypeDefaultDescription
selectedselectedbooleanfalse
disableddisabledbooleanfalse
activeproperty onlybooleanfalseWhether this segment currently holds the group's roving tabindex. Entirely managed by the parent group — don't set it directly.

Slots

SlotDescription
defaultThe segment's label.
iconAn optional icon shown before the label. Ignored on a selected segment, which shows a checkmark in its place — the same leading-icon/checkmark swap lit-material-chip's filter variant makes.

CSS parts

PartDescription
buttonThe button (background/padding).
rippleThe state-layer element the hover/press feedback is drawn on.
focus-ringThe focus indicator element.

Source on GitHub npm