Glide Select

Select chip whose menu pops out of its own corner and whose single hover highlight glides between rows, remembering where you left it so re-entry slides from there instead of blinking in.

Default

Open the chip, then move across the rows. Press and drag to scrub, release over a row to pick it. Arrow keys, Home, End and type-ahead work too.

Customize

Options

Size

Accent

Surface

Highlight

Text

Radius10px

Menu Width176px

Placement

Align

Pop180ms

Glide220ms

Remember PositionShow TagsDisabled

API Reference

GlideSelect

Prop	Type	Default	Description
`options`	`(string \| { value: string; label: string; tag?: string })[]`	`['One', 'Two', 'Three']`	The rows. A string is both value and label; a tag shows muted at the right.
`modelValue`	`string`	`undefined`	Selected value, usable with v-model. Outside changes never animate.
`defaultValue`	`string`	`undefined`	Initial value when uncontrolled.
`placeholder`	`string`	`'Select…'`	Chip text while nothing is selected.
`showTags`	`boolean`	`true`	Shows each row's tag.
`accentColor`	`string`	`'#f5f5f5'`	The check on the selected row.
`surfaceColor`	`string`	`'#27272a'`	Chip and menu background.
`highlightColor`	`string`	`'#3f3f46'`	The gliding pill. The selected row rests on it at 60%, and the chip tint derives from it.
`textColor`	`string`	`'#f5f5f5'`	Labels. Tags and the chevron derive from it.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Chip 28, 32 or 44 pixels with matching rows. Large is the touch-first size.
`radius`	`number`	`10`	Menu corner in pixels. Chip, rows and pill use 4 less so they stay concentric.
`menuWidth`	`number`	`176`	Menu width in pixels, never narrower than the chip.
`placement`	`'top' \| 'bottom'`	`'bottom'`	Which side the menu grows on. It flips when the chosen side would leave the viewport.
`align`	`'left' \| 'right'`	`'left'`	Which chip edge the menu shares.
`popDuration`	`number`	`180`	Milliseconds the menu takes to grow out of its corner. It leaves in two thirds of that.
`glideDuration`	`number`	`220`	Milliseconds the pill takes to travel between rows. 0 is a conventional hover.
`rememberPosition`	`boolean`	`true`	The highlight stays on the row the pointer left, so re-entry glides from there. Off, it clears on leave and the selected row shows again.
`disabled`	`boolean`	`false`	Dims the chip and ignores input.
`ariaLabel`	`string`	`'Select'`	Accessible name of the chip and list.

Event	Description
`update:modelValue`	Emitted on a pick that changes the value.
`change`	Same moment as update:modelValue, carrying the value and the picked option.

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Enter` + `Space` + `ArrowDown` + `ArrowUp`	On the closed chip, opens the menu on the selected row.
`ArrowDown` + `ArrowUp` + `Home` + `End`	Moves the highlight.
`A-Z`	Type-ahead jumps to the next row starting with that letter.
`Enter` + `Space`	Picks the highlighted row.
`Escape` + `Tab`	Closes the menu.

The chip is a combobox that keeps focus, and the active row is announced through aria-activedescendant.

Fuse Button Hold Button