# Shadcn Suffix Icon

> Input group with suffix icon

- Type: example, free and open source (MIT)
- Component: [Input Group](https://reui.io/components/input-group.md)
- Page: https://reui.io/components/input-group/c-input-group-5
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/input-group.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/input-group.md
- MCP: `get_example("c-input-group-5")`
- Registry item: https://reui.io/r/styles/base-nova/c-input-group-5.json
- Uses: Field, Input Group

## Best for

An email field with a mail icon after the typed text and nothing before it

## When not to use

- A search icon placed ahead of the typed text: use [Prefix Icon](https://reui.io/components/input-group/c-input-group-4.md) (`get_example("c-input-group-4")`)

## Install

```bash
npx shadcn@latest add @reui/c-input-group-5
```

## About Shadcn Input Group

### When to use

- Text fields with a leading icon, prefix or suffix text, a unit or a status mark inside one border
- Search, link and API bars that end in a copy, clear, filter, menu or send control
- Prompt and comment composers: a text area with a toolbar row above or below the text

### When not to use

- Selects, fields and actions joined edge to edge, each keeping its own border: use [Button Group](https://reui.io/components/button-group.md) (`get_component("button-group")`)
- A plain text field with no icon, text or action inside its border: use [Input](https://reui.io/components/input.md) (`get_component("input")`)
- A complete assistant screen with a message thread above the prompt box: use the [AI Chat blocks](https://reui.io/blocks/ai-agents/ai-chat.md)

### Agent notes

- The border turns red from `aria-invalid` on the control; `data-invalid` on `Field` only tints text, so set both as `c-input-group-3` does
- Addon icons and text never name the control; tie a `FieldLabel` to the input or textarea id as `c-input-group-20` does, or give it an aria label
- `InputGroupButton` defaults `type` to button, so pass submit when it should send the surrounding form

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.