Morph select

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

$npx shadcn@latest add @silicon-ui/morph-select

inputsnew

Installation

$npx shadcn@latest add @silicon-ui/morph-select

Install the dependencies.
$npm install lucide-react motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/morph-select/morph-select.tsx
- components/silicon-ui/morph-select/morph-select.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { MorphSelect } from "@/components/silicon-ui/morph-select/morph-select";

Prop	Type	Default
`label*` Visible label, also the accessible name of the trigger and the list.	`string`	—
`items*`	`MorphSelectItem[]`	—
`hideLabel` Keeps the label for assistive technology only.	`boolean`	`false`
`value`	`string \| null`	—
`defaultValue`	`string \| null`	`null`
`onValueChange`	`(value: string, option: MorphSelectOption) => void`	—
`placeholder`	`string`	`"Select"`
`searchable` Shows a search field in place of the trigger when open. "auto" turns it on above eight options.	`boolean \| "auto"`	`"auto"`
`searchPlaceholder`	`string`	—
`panelWidth` Width of the open surface in px. It never gets narrower than the trigger. Defaults to 272.	`number`	`272`
`maxListHeight` Tallest the option list gets before it scrolls, in px. Defaults to 296.	`number`	`296`
`align` Which edge of the trigger stays put while the surface grows.	`"start" \| "end"`	`"start"`
`name` Adds a hidden input for native form submission.	`string`	—
`disabled`	`boolean`	`false`
`className`	`string`	—