Rubber Segment

Segmented control with a rubber thumb that stretches across the old and new slot on a tap, squashes on landing and can be dragged, flicked and pulled past its ends.

Default

Tap a slot, or grab the thumb and drag or flick it. Pulled past either end it stretches like rubber.

Customize

Items

Size

Track

Thumb

Text

Active Text

Radius10px

Inset3px

Equal Slots

Stretch100

Squash3px

Speed1x

Glide75

DraggableDisabled

API Reference

RubberSegment

Prop	Type	Default	Description
`items`	`(string \| { value: string; label: string; icon?: string })[]`	-	The slots, in order. A string is both value and label. An icon is an Iconify name.
`value`	`string`	`undefined`	Controlled value, bound with v-model:value. A change from outside jumps the thumb without animation.
`defaultValue`	`string`	`undefined`	Initial value when uncontrolled. The first item if omitted.
`trackColor`	`string`	`'#27272a'`	The well behind the slots.
`thumbColor`	`string`	`'#fafafa'`	The rubber thumb, and the focus ring.
`textColor`	`string`	`'#fafafa'`	Idle labels, drawn at 70%.
`activeTextColor`	`string`	`'#18181b'`	The label revealed inside the thumb.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Track height 28, 36 or 44 pixels. Font and padding follow.
`radius`	`number`	`10`	Track corner radius in pixels.
`inset`	`number`	`3`	Gap between the thumb and the track edge. The thumb corner is radius minus inset.
`equalSlots`	`boolean`	`true`	Every slot the same width. Off, slots hug their labels and the thumb changes width per slot.
`stretch`	`number`	`100`	How far a tap dilates the thumb across old and new slot before it contracts. 0 is a plain slide.
`squash`	`number`	`3`	Pixels the trailing edge lands past the slot edge before relaxing. 0 removes the squash.
`speed`	`number`	`1`	Scales every phase together. 0.25 is slow motion.
`glide`	`number`	`75`	How far a flick carries the thumb before it snaps. 0 always lands on the nearest slot.
`draggable`	`boolean`	`true`	Lets the thumb be grabbed, dragged and flicked.
`disabled`	`boolean`	`false`	Dims the control and ignores input.
`ariaLabel`	`string`	`'Segmented control'`	Accessible name of the radio group.

Event	Description
`change`	Emitted with the value and the index on a tap, on a drag release and on every arrow key.
`update:value`	Emitted alongside change, for v-model:value.

Slot	Description
`item`	Scoped slot with item and index. Replaces the content of a slot, in the track and in the thumb copy.

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Arrow Right` + `Arrow Down`	Selects the next slot.
`Arrow Left` + `Arrow Up`	Selects the previous slot.
`Home` + `End`	Selects the first or the last slot.

Rendered as a radiogroup of radio buttons with a roving tabindex. The thumb copy of the labels is hidden from assistive technology.
With prefers-reduced-motion the thumb jumps and dragging does not stretch past the ends.

Refine Frame Scrub Field