Inputs
Addon Input Group
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.
Using Addon Input Group
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.
Customize the preview
These controls are passed to the demo. Defaults and limits describe the preview; consult the implementation for its full prop API.
| Control | Type | Default | Preview limits |
|---|---|---|---|
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. |
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.
