# Addon input (goodtabs UI)

An input with a text prefix or suffix inside the same bordered field.

## Install

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

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

## Usage

```tsx
import { AddonInput } from "@/components/ui/addon-input"

<AddonInput prefix="https://" placeholder="goodtabs.co" />
<AddonInput suffix=".com" placeholder="yourcompany" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| prefix | `ReactNode` |  | Text or node before the input, inside the same border. |
| suffix | `ReactNode` |  | Text or node after the input, inside the same border. |

## When to use

- A url, handle or domain where part of the value is fixed and should not be typed
- Money, percentages and quantities that need a symbol or unit next to the number
- Anywhere a hint about the format belongs inside the field, not in a placeholder

## When not to use

- For icons or buttons inside a field: use a plain Input with an absolutely placed control
- When the prefix or suffix changes with the value, use a select or a combobox next to the field
- For search, use the search input

## Notes for agents

- Server component. It extends shadcn's Input, so type, disabled, aria-invalid and every input prop pass through
- className goes on the wrapper, so widths and font classes apply to the whole field; the Input stretches inside it
- The addons are not part of the value: prepend or append them yourself before saving
- Pass aria-label or wire a Label with htmlFor to the id, as with any input

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