Glass segmentedPro

• Type: Component (special)
• Access: Xzero Pro
• Page: https://ui.xzero.co.uk/components/glass-segmented
• Markdown: https://ui.xzero.co.uk/components/glass-segmented/markdown
• Source file: registry/components/glass-segmented/glass-segmented.tsx
• Dependencies: motion
• Keywords: special, glass, input, new, segmented control, liquid glass, toggle group, tabs, gooey indicator, stretch, frosted, drag

When to use

• Switching the view of a photo, map, or media surface.
• A compact filter over imagery, such as day, week, month on a hero chart.

When not to use

• Plain forms on neutral surfaces. Use segmented-control.
• More than five options or long labels. Use tabs or a select.

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui-pro/glass-segmented

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { useState } from "react";
import { GlassSegmented } from "@/components/xzero/glass-segmented/glass-segmented";

export function MapMode() {
  const [mode, setMode] = useState("explore");
  return (
    <GlassSegmented
      label="Map mode"
      value={mode}
      onValueChange={setMode}
      options={[
        { value: "explore", label: "Explore" },
        { value: "drive", label: "Drive" },
        { value: "transit", label: "Transit" },
      ]}
    />
  );
}

API reference

GlassSegmented

A glass segmented control with a liquid indicator: the leading edge races ahead and the trailing edge catches up, so the drop stretches and thins between segments. Drag the selected segment to slide it.

Prop	Type	Default	Description
options (required)	GlassSegmentedOption[]	–	Segments: { value, label, icon?, badge?, disabled? }. badge shows a small count in the accent color.
label (required)	string	–	Accessible name of the group.
value	string	–	Controlled value.
defaultValue	string	–	Initial value when uncontrolled. Defaults to the first enabled option.
onValueChange	(value: string) => void	–	Called when a segment is chosen by click, keys, or a drag.
size	"sm" | "md"	"md"	36px or 44px tall.
fullWidth	boolean	false	Stretches to the container width with equal segments.
className	string	–	Extra class on the root.
style	CSSProperties	–	Inline styles on the root.

Keyboard interactions

Keys	Action
Tab	Focus the selected segment.
Arrow keys	Select the previous or next segment, wrapping at the ends.
Home / End	Select the first or last segment.

Accessibility

• The control is a radiogroup with a roving tab stop; each segment is a radio with aria-checked.
• The indicator is decorative SVG and hidden from assistive tech.
• Selection is also shown by label color, not only by the indicator.

Motion

• Each edge of the indicator has its own spring: the edge facing the travel is quick, the other lags, so the drop stretches and then settles.
• The drop thins as it stretches, like liquid keeping its volume.
• Drag the selected segment and the drop follows with the same liquid lag; on release, velocity is projected to pick where it lands.
• With reduced motion the indicator jumps and dragging tracks directly.

Responsive behavior

• fullWidth gives equal segments that fill the container at 320px.
• Touch drag uses touch-action: pan-y, so vertical scroll still works over the control.

Performance

• The indicator is an SVG rect whose attributes update from motion values, so the stretch is paint only with no layout.
• Segment positions are measured once and on resize.

Notes for AI

• Use for two to five short, mutually exclusive views on top of imagery or maps, where the glass reads against the content.
• Use fullWidth on mobile or inside a card; keep labels to one or two words.
• Drag only starts on the selected segment, so taps elsewhere stay plain clicks.

Related

• Segmented control: Switch between a small set of related views.
• Liquid tab bar: Tabs with a lens selection that slides between them, swaps labels cleanly, and fills in icons as it passes.
• Billing toggle: A monthly and yearly switch with a savings badge and prices that roll to the new amount.

Also in glass

• Glass menu: A glass action menu whose trigger morphs into the panel, with a highlight pill that glides between rows, one in-place submenu, and full keyboard support.
• Glass card: A glass info panel over a photo whose rim catches a pointer-following highlight while the card tilts; tap to morph it into a detail sheet.
• Glass tab bar: A floating Liquid Glass tab bar that refracts what scrolls beneath it, with a glass lens that glides, magnifies and can be dragged between tabs, and an optional search bubble; it compacts on scroll down.

Guidance for AI tools

Glass segmented: A glass segmented control whose liquid indicator stretches between segments and can be dragged and flung. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt