# Prompt composer

> The input for AI apps: a field that grows with the text on a spring, chips that add phrases to the prompt, and a send button that morphs into a stop square while a job runs.

- Type: Component (inputs)
- Access: Free, open source (MIT)
- Page: https://goodui.dev/native/components/prompt-composer
- Markdown: https://goodui.dev/native/components/prompt-composer.md
- Registry item: https://goodui.dev/native/r/prompt-composer.json
- Dependencies: react-native-reanimated, react-native-svg
- Keywords: react native prompt input, chat composer, ai input bar, stop generating button, suggestion chips

## When to use

- Describing what to generate, with optional suggested phrases.
- A chat reply bar that needs a stop button while the answer streams.

## When not to use

- Search: use search-bar.
- Person-to-person chat: chat-screen has its own composer.

## Installation

With the shadcn CLI (needs a components.json in the Expo app), then `npx expo install --fix` so native dependencies match your Expo SDK. The foundation comes along the first time.

```bash
npx shadcn@latest add https://goodui.dev/native/r/prompt-composer.json
npx expo install --fix
```

The component lands in `components/goodui-native/prompt-composer/` and imports the foundation from `components/goodui-native/foundation/` with relative paths; it also installs locale.

Built-in strings follow `<GooduiLocaleProvider>` (one [language pack](https://goodui.dev/native/r/locale-tr.json) translates the whole kit); the `labels` prop overrides them for one instance.

## Usage

```tsx
import { useState } from "react";
import { PromptComposer } from "@/components/goodui-native/prompt-composer/prompt-composer";

const [prompt, setPrompt] = useState("");

<PromptComposer
  value={prompt}
  onChangeText={setPrompt}
  onSubmit={(text) => generate(text)}
  busy={running}
  onStop={cancel}
  chips={[{ id: "studio", label: "Studio light" }, { id: "film", label: "Film grain" }]}
/>
```

## API reference

### PromptComposer

`import { PromptComposer } from "@/components/goodui-native/prompt-composer/prompt-composer";`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` (required) | `string` | – | – |
| `onChangeText` (required) | `(text: string) => void` | – | – |
| `onSubmit` (required) | `(text: string) => void` | – | Send was pressed with text in the field. |
| `busy` | `boolean` | `false` | A job is running: send morphs into a stop square. |
| `onStop` | `() => void` | – | – |
| `chips` | `PromptChip[]` | – | Tappable phrases above the field; a tap appends and the chip fills. |
| `leading` | `ReactNode` | – | A button left of the field: attach, camera. |
| `emptyAction` | `ReactNode` | – | Empty-field action in place of send, usually the voice button. |
| `footer` | `ReactNode` | – | Sits under the text, inside the box: a live cost. |
| `maxLines` | `number` | `6` | – |
| `inputRef` | `Ref<ComponentRef<typeof TextInput>>` | – | – |
| `labels` | `Partial<PromptComposerLabels>` | – | – |
| `style` | `StyleProp<ViewStyle>` | – | Style for the outer container. |
| `testID` | `string` | – | Identifier for end-to-end tests. |

## Accessibility

- The field uses the placeholder as its label, so keep it descriptive.
- The send button's label switches to Stop while busy, and it is disabled with no text.
- Chips expose their selected state.

## Motion

- The field height springs as lines are added, up to maxLines.
- The arrow morphs into a stop square on the morph spring.
- Reduced motion: height and morph changes happen at once.

## Haptics

- select on chips, send on submit, warning on stop.

## Performance

- The field height and button morph run on the UI thread.

## Notes for AI

- It is controlled: pass value and onChangeText. Clear the value yourself in onSubmit if you want it cleared.
- `footer` renders under the text inside the box, a good place for CreditsCost.
- `emptyAction` replaces send while the field is empty, usually a voice button.
- Chip text is appended with a comma. A chip is on while its phrase is in the text, so editing the text updates it.
- Keep it above the keyboard in your own layout; it does not handle the keyboard itself.

## Related

- [Credits meter](https://goodui.dev/native/components/credits-meter.md): A balance pill for an app bar whose digits roll when the balance changes and which turns warning colored when low, plus CreditsCost, a live price line that says what a job costs and what is left after it.
- [Stream text](https://goodui.dev/native/components/stream-text.md): Text that arrives word by word: new words fade up and a caret pulses at the end, and when streaming stops it becomes one plain text block.
- [Voice orb](https://goodui.dev/native/components/voice-orb.md): A sphere of drifting color lobes for voice modes: idle, listening, thinking and speaking each move differently, it swells with the audio level, and a halo pulses behind it.
- [Generation queue](https://goodui.dev/native/components/generation-queue.md): Cards for long AI jobs: each one shows its status, a fill and a light sweep while running, a rolling percentage, and cancel, retry and open actions.

## Guidance for AI tools

Prompt composer: The input for AI apps: a field that grows with the text on a spring, chips that add phrases to the prompt, and a send button that morphs into a stop square while a job runs. Use only the documented props. Keep accessibility, reduced motion and both color schemes intact when adapting it.

Full library index: https://goodui.dev/native/llms.txt