# Addon Input Group

https://fieldbook.lizardi.mx/components/addon-input-group

Category: Inputs
![Still of the Addon Input Group component, a Fieldbook UI component in Inputs.](https://fieldbook.lizardi.mx/thumbs/addon-input-group.webp)
Preview video: https://ejpqcxcjbiyabxkx.public.blob.vercel-storage.com/previews/addon-input-group-4ebc5f9388.mp4 (5 s, silent)

Addon Input Group: A text field wrapped in one bordered shell that can carry a leading icon, a trailing button or text, and shares one focus ring across the whole group.

## Frameworks

react, vue, svelte, astro, html

## Preview controls

These controls are passed to the demo. Defaults and limits describe the preview; consult the implementation for its full prop API.

| Name | Type | Default | Options or constraints |
| --- | --- | --- | --- |
| placeholder | text | Search components... | Up to 40 characters |
| trailingLabel | text | Search | Up to 16 characters |
| accentColor | color | #38BDF8 | No additional limit in the metadata. |
| showLeadingIcon | boolean | true | No additional limit in the metadata. |

## Usage notes

Use this input group when a text field and its action belong together, such as a catalog search.

Addon Input Group uses the inline preview frame with a light/dark theme setting.

Place the search icon before the field and connect the trailing button to your search handler. The shared focus ring keeps the group visually connected while typing.

The component supplies the input and presentation. Your application must provide an accessible label, handle the search, and validate the submitted value.

### Which frameworks are available for Addon Input Group?

Addon Input Group is available for React, Vue, Svelte, Astro, HTML. The live preview uses React; the source observations below apply to index.tsx. Check the selected port before relying on the same interactions.

### What does Addon Input Group depend on?

The React metadata lists these npm dependencies beyond React: clsx.

### What accessibility details are visible in Addon Input Group?

The React source for Addon Input Group includes: native elements (button, input); attributes and handlers (aria-hidden, aria-invalid). These are source observations. Verify accessible names, focus order and keyboard behavior in the composed page.

### How does Addon Input Group handle reduced motion?

The source scan found no direct useReducedMotion() or matchMedia preference read in Addon Input Group's index.tsx. Check the full implementation, shared styles and selected port with reduced motion enabled; these observations do not establish that every animation stops.

## Install through MCP

Connect your client, call get_component to retrieve the implementation, then get_install_command for installation instructions. Choose a listed framework, integrate the returned source and verify it in your application.

```json
{
  "tool": "get_component",
  "arguments": {
    "slug": "addon-input-group",
    "framework": "react"
  }
}
```

[For agents](https://fieldbook.lizardi.mx/docs/agents)
[MCP](https://fieldbook.lizardi.mx/api/mcp)

## Related open components

- [Auto Grow Textarea](https://fieldbook.lizardi.mx/components/auto-grow-textarea)
- [Focus ring text input](https://fieldbook.lizardi.mx/components/focus-ring-text-input)
- [Select All Checklist](https://fieldbook.lizardi.mx/components/indeterminate-select-all)
- [Input with affix](https://fieldbook.lizardi.mx/components/input-group-affix)
- [Orbit drop zone](https://fieldbook.lizardi.mx/components/orbit-drop-zone)
- [Single value slider](https://fieldbook.lizardi.mx/components/single-value-slider)