Glass segmented
ProA glass segmented control whose liquid indicator stretches between segments and can be dragged and flung.
Live · keyboard ready
Alfama at sunsetMiradouro de Santa Luzia
- Switching the view of a photo, map, or media surface.
- A compact filter over imagery, such as day, week, month on a hero chart.
- Plain forms on neutral surfaces. Use segmented-control.
- More than five options or long labels. Use tabs or a select.
Installation
Pro source and install commands unlock with a Pro plan.
example.tsx
import { useState } from "react";import { GlassSegmented } from "@/components/arc/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" }, ]} /> );}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.
PropTypeDefaultDescription
optionsRequiredGlassSegmentedOption[]–Segments: `{ value, label, icon?, badge?, disabled? }`. `badge` shows a small count in the accent color.labelRequiredstring–Accessible name of the group.valuestring–Controlled value.defaultValuestring–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.fullWidthbooleanfalseStretches to the container width with equal segments.classNamestring–Extra class on the root.styleCSSProperties–Inline styles on the root.- Tab
- Focus the selected segment.
- Arrow keys
- Select the previous or next segment, wrapping at the ends.
- HomeorEnd
- Select the first or last segment.
- 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.
- 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.
- `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.
- 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
Give your coding assistant the Markdown reference instead of screenshots.
- 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.
The full library index for assistants is at /llms.txt.