# Input with action (goodtabs UI)

An input with a small button inside the field. Enter presses the button.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/input-action.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/input-action`

## Usage

```tsx
import { InputAction } from "@/components/ui/input-action"

<InputAction type="email" placeholder="teammate@company.com" actionLabel="Invite" onAction={invite} pending={isPending} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| actionLabel | `string` |  | Text on the button. With actionIcon it becomes the accessible name. |
| onAction | `(value: string) => void` |  | Called with the field's current value on click and on Enter. |
| pending | `boolean` | `false` | Shows a spinner and disables the button. |
| actionVariant | `"default" | "outline" | "secondary" | "ghost"` | `"default"` | Button variant inside the field. |
| actionIcon | `ReactNode` |  | Replaces the label with an icon; the label becomes the aria-label. |
| inputClassName | `string` |  | Classes for the inner input; className styles the field. |

## When to use

- One field, one action: invite by email, subscribe, go to a URL, run a command
- Inline forms in settings and headers where a separate submit button is too heavy
- When pressing Enter should do the same thing as the button

## When not to use

- Forms with more than one field, use a normal form with a submit button
- Search as you type, use the search input instead
- When the action needs confirmation or a second step

## Notes for agents

- It takes functions (onAction), so the demo or page that renders it must be a client component
- The field is uncontrolled by default; every Input prop passes through, so value and onChange control it
- The button is size sm (28px) inside the 32px field with a 2px inset; set pending from your mutation state
- Give the input an aria-label or a visible label; the button label does not name the field

Docs: https://ui.goodtabs.co/components/input-action