Segmented Control

A pill of liquid glass you can tap or drag between options.

DayWeekMonthYear

Installation#

pnpmnpmyarnbun

$ pnpm dlx shadcn@latest add @liquikit/segmented-control

Needs the @liquikit registry in your components.json. Set it up once.

import { SegmentedControl } from "@/components/liquikit/segmented-control"

<SegmentedControl
  options={["Day", "Week", "Month"]}
  defaultValue="Week"
  aria-label="Range"
/>

It is a radio group underneath, so the arrow keys move between options.

A label can be any React node. Give icon labels an aria-label.

Prop	Type	Default
`theme`	`"light" \| "dark"` Light or dark glass. Falls back to the nearest `GlassThemeProvider`, then light.	—
`lens`	`Partial<LensProfile>` Overrides for the lens profile, such as `thickness`, `bevel`, `ior` and `magnification`.	—
`liquid`	`number` How far the glass squashes and stretches as it moves. `0` keeps it rigid.	—
`options*`	`ReadonlyArray<string \| Segment>` The segments, as strings or `{ value, label, disabled }` objects.	—
`value`	`string` The current value, when you control it.	—
`defaultValue`	`string` The value it starts with, when it manages its own state.	—
`onValueChange`	`(value: string, eventDetails?: RadioGroup.ChangeEventDetails) => void` Called with the new value when the user changes it.	—
`height`	`number` Height of the control, in pixels.	—

Also takes every prop of Base UI's radio group, plus className and style.