# Shadcn In Input Group

> Spinner in input group.

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

## Best for

A search field under a Searching label, its spinner shown in a leading addon before the typed text

## Agent notes

- `FieldLabel` points `htmlFor` at the `InputGroup` wrapper, not the input; move the `id` to `InputGroupInput` so the label names the field
- `InputGroupAddon` has no align set, so it takes the inline start slot and the spinner leads the field despite its markup order

## When not to use

- A locked field that keeps its value while a check turns at its end: use [Input Group](https://reui.io/components/input-group.md) (`get_component("input-group")`)

## Install

```bash
npx shadcn@latest add @reui/c-spinner-4
```

## About Shadcn Spinner

### When to use

- Pending states inside buttons, status badges and search fields while a request runs
- Loading views for a card or an empty panel, including blurred covers over content being refreshed
- Inline notes such as checking, syncing or reconnecting, led by a small tinted spinner or bouncing dots

### When not to use

- Content of a known layout, held as muted placeholder shapes until it arrives: use [Skeleton](https://reui.io/components/skeleton.md) (`get_component("skeleton")`)
- A wait where the share of work done is known, such as an upload percent: use [Progress](https://reui.io/components/progress.md) (`get_component("progress")`)
- A save control that tracks its own pending and done states after a click: use [Button](https://reui.io/components/button.md) (`get_component("button")`)

### Agent notes

- No example holds a pending flag and `disabled` is hardcoded where it appears; show the indicator and lock controls from your own request state

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.