# Glass Search Morph

Glass search button that stretches into a full search field when tapped, then pours back into a small disc when you close it.

> Composed · Pro · Signature — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/glass-search-morph
```

## Import

```tsx
import { GlassSearchMorph } from "@/components/ui/glass-search-morph/glass-search-morph";
```

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `value?` | `string` | — |
| `onChangeText?` | `(text: string) => void` | — |
| `onSubmitEditing?` | `TextInputProps["onSubmitEditing"]` | Return key pressed. |
| `placeholder?` | `string` | — |
| `expandedWidth?` | `number` | Width of the expanded field in pt. Default 280. |
| `expanded?` | `boolean` | Controlled expansion — uncontrolled when omitted. |
| `defaultExpanded?` | `boolean` | — |
| `onExpandedChange?` | `(expanded: boolean) => void` | — |
| `className?` | `string` | — |

## Icons rendered

- `search` — /icons.html?i=search
- `x` — /icons.html?i=x

Source: https://lumioui.com/components/glass-search-morph