Manicat UI

Morph select

A select whose trigger grows into the list, with a gliding highlight and type-ahead.

inputsnew
Preview
Morph select preview
Deploy target

When to use

  • Form fields and property panels where one value is picked from a known list.
  • Grouped lists like time zones, assignees, or projects, with optional icons and meta.
  • Compact toolbars where the picker should look like a pill until opened.

When not to use

  • Use combobox when users type free text or the list is very long and remote.
  • Use multi-select when more than one value can be chosen.
  • Use dropdown-menu for actions rather than a stored value.

shadcn CLI

Also installs (1)

  • manicat-foundation
Manual install(+)
registry.jsonjson
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "morph-select",
  "type": "registry:ui",
  "title": "Morph select",
  "description": "A select whose trigger grows into the list, with a gliding highlight and type-ahead.",
  "categories": [
    "inputs"
  ],
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "https://manicat.viraza.net/r/manicat-foundation.json"
  ],
  "files": [
    {
      "path": "registry/components/morph-select/morph-select.tsx",
      "type": "registry:component",
      "target": "@components/manicat/morph-select/morph-select.tsx"
    },
    {
      "path": "registry/components/morph-select/morph-select.module.css",
      "type": "registry:component",
      "target": "@components/manicat/morph-select/morph-select.module.css"
    }
  ],
  "docs": "Docs and live preview: https://uiarc.dev/components/morph-select",
  "meta": {
    "tier": "free",
    "kind": "component",
    "docs": "https://manicat.viraza.net/components/morph-select",
    "markdown": "https://uiarc.dev/components/morph-select/markdown",
    "tags": [
      "inputs",
      "new"
    ]
  }
}

Usage

Install the component, then copy this into your app. Change the content and the props to fit your screen.

example.tsxtsx
"use client";

import { useState } from "react";
import { MorphSelect } from "@/components/manicat/morph-select/morph-select";

export function MorphSelectExample() {
  const [value, setValue] = useState<string | null>("bill");

  return (
    <MorphSelect
      label="Deploy target"
      value={value}
      onValueChange={(next) => setValue(next)}
      items={[
        { label: "Staging", options: [{ value: "preview", label: "Preview", meta: "3 min" }, { value: "bill", label: "Bill", meta: "now" }] },
        { label: "Production", options: [{ value: "eu", label: "Europe", meta: "1 region" }, { value: "us", label: "United States", meta: "2 regions" }] },
      ]}
    />
  );
}

Examples

Real screens rather than isolated props. Switch to Code to copy a whole example into your project.

Issue properties Compact pickers in a ticket header; each trigger grows into its list and the chosen label settles back in.

Issue properties Compact pickers in a ticket header; each trigger grows into its list and the chosen label settles back in. preview

MAN-482

Checkout button stalls on Safari 17

Status
Assignee

Timezone field Grouped options with an offset on the right and search keywords, so typing “est” finds New York.

Timezone field Grouped options with an offset on the right and search keywords, so typing “est” finds New York. preview
Timezone

Digest emails are sent at 8:00 in Europe/Paris.

Keyboard interactions

KeysAction
Enter / Space / ArrowDown / ArrowUpOpens the list on the selected option; Enter or Space picks the active option when open.
ArrowDown / ArrowUpMoves the active option, skipping disabled ones.
PageDown / PageUpMoves eight options at a time.
Home / EndMoves to the first or last option; when closed, opens on it.
Alt + ArrowUpPicks the active option and closes.
Printable charactersType-ahead jumps to a matching label, or starts a search when search is on.
EscapeCloses and returns focus to the trigger.
TabCloses and moves focus on without picking.

Accessibility

  • The trigger is a role="combobox" with aria-haspopup="listbox", aria-expanded, and aria-activedescendant pointing at the active option.
  • With search on, the input takes over as the combobox with aria-autocomplete="list", and the trigger turns inert.
  • Options are role="option" with aria-selected and aria-disabled; groups are role="group" labelled by their heading.
  • A polite status announces the number of search results or No matches.

Motion

  • The trigger surface grows into the list on a physical spring with slight bounce and folds back without overshoot; the corner radius morphs with it.
  • One highlight glides between options; the chosen label lifts out of the list and flies into the trigger while the trigger width springs.
  • Values in the trigger roll up or down depending on whether the new option is later or earlier in the list.
  • Reduced motion jumps the size, removes the fly and roll, and uses short fades.

Responsive behavior

  • The closed trigger sizes to its label up to min(20rem, 100vw - 2rem); the open list is max(trigger width, min(panelWidth, 100vw - 2rem)).
  • Set align="end" for triggers near the right edge so the surface grows leftward.
  • Hover highlight follows the mouse only; on touch a tap picks directly, and hover styles apply only on fine pointers.

Performance

  • A hidden measuring copy and a ResizeObserver size the trigger and list; the surface animates width, height, and radius through motion values.
  • All options render; there is no virtualization, so keep lists to a few hundred items.
  • Search filters in memory on label, meta, and keywords.

Notes for AI

  • Use for compact property pickers and form fields with up to a few hundred options, including avatars or icons.
  • Add keywords to options so search matches synonyms; meta shows trailing detail like counts or offsets.
  • Pass name to submit with a native form; the hidden input carries the value.
  • Use combobox when people mostly type free text, and multi-select for several values.