Skip to content
Pinky UI

forms

Morph Select

A labeled compact control expands into a complete active-descendant listbox and returns the selected value to the same surface.

  • forms
  • select
  • listbox
  • typeahead

Live preview

Export quality

Quick usage

usage
import { MorphSelect } from "@pinky-ui/systems";

<MorphSelect label="Format" options={formats} />

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
optionsMorphSelectOption[]—Short single-select option set.
classNamestring—Styles the outer interaction surface.

Accessibility

  • Arrow, Home/End, Enter, Escape and short typeahead are supported by the focused listbox.
  • Closing restores focus to the labeled trigger; active-descendant and selected state remain semantic.

Performance

  • Options mount only while open; no large list virtualization is implied.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Short custom product option sets

When not to use

  • Long, searchable or platform-standard selects

Skill

Purpose

MorphSelect expands a compact value control into a complete single-select listbox with an active descendant, keyboard navigation and focus restoration. Use it for short custom option sets where styled spatial continuity matters.

Prefer native select for long, platform-standard or mobile-critical choices. Avoid multi-select, remote search and hundreds of options. Do not remove labels or replace familiar keyboard behaviour for animation.

Arrow keys, Home/End, Enter, Escape and short typeahead are supported; focus returns to the trigger. Reduced motion removes expansion choreography. Disabled options remain skipped, and validation belongs to the surrounding labeled form field.

Open this skill on its own page