InputGroup
InputGroup composes an Input with explicit inline addons without changing native form semantics.
Overview and decision boundary
Use InputGroup to place clear supporting inline content around one native Input without changing its responsibility.
Do not turn InputGroup into a search results, password visibility, date-picker, or formatting abstraction.
The prefix is visual context; the label names the control.
import { Field, Input, InputGroup, InputGroupAddon } from "@nerio-ui/ui";<Field label="Website"> <InputGroup> <InputGroupAddon placement="start" aria-hidden="true">https://</InputGroupAddon> <Input autoComplete="url" /> <InputGroupAddon placement="end" aria-hidden="true">.com</InputGroupAddon> </InputGroup></Field>Installation and imports
Install the editable registry source, or use the matching package entrypoint when the product keeps Nerio as a workspace dependency.
pnpm exec nerio add input-groupimport { Input, InputGroup, InputGroupAddon } from '@nerio-ui/ui';Usage
import { Input, InputGroup, InputGroupAddon } from '@nerio-ui/ui';<InputGroup><InputGroupAddon placement="start" aria-hidden="true">https://</InputGroupAddon><Input aria-label="Website" /><InputGroupAddon placement="end">.com</InputGroupAddon></InputGroup>Variants
| Mode | Purpose |
|---|---|
start | Places context before the native Input. |
end | Places context or one compact action after the native Input. |
sm / md / lg | Aligns addons to the nested Input size. |
Anatomy
| Slot | Purpose |
|---|---|
input-group | Shared tokenized surface that responds to the nested Input state. |
input | The direct native Input that retains form and accessibility semantics. |
input-group-addon | Explicit start or end content such as a decorative icon, prefix, suffix, or action. |
States
| State | Behavior |
|---|---|
Default | Keeps the Input and addons visually grouped. |
Focus within | Applies the shared focus treatment when the nested Input is focused. |
Invalid | Mirrors the nested Input invalid state without owning validation. |
Disabled / read-only | Preserves the nested Input native availability semantics. |
Motion
- Hover and focus-within use the shared tokenized Input motion contract.
- Reduced motion preserves the state change without nonessential timing.
Accessibility
- Preserves nested Input native semantics and forwards Field label, description, and invalid wiring to a direct Input child.
- Use Field, Label, or aria-describedby to name and describe the control; text addons do not silently become its accessible name.
- Decorative addon icons must be aria-hidden; interactive addon content remains independently keyboard accessible.
Review the shared responsibility and evidence boundaries in the Accessibility foundation alongside this component-specific contract. Use the Spacing & layout foundation for shared density, wrapping, overflow, reflow, and component-versus-product ownership guidance. The Color foundation, Typography foundation, and Localization foundation define the shared visual-role, text-resilience, direction, and locale boundaries used by component examples.
API
| API | Values | Purpose |
|---|---|---|
InputGroup | div attributes and Field wiring | Owns only grouped layout and state styling. |
placement | start | end | Positions an InputGroupAddon around the Input. |
children | ReactNode | Composes one Input with explicit addons. |
Implementation contract
| Contract | Value |
|---|---|
Registry item | input-group installs 6 source files into the configured components directory. |
Base UI | No interactive primitive required. |
Registry dependencies | input |
Package dependencies | clsx, react, tailwind-merge, tailwindcss |
Styling contract
| Contract | Value |
|---|---|
Authoring | Complete, statically detectable Tailwind CSS v4 recipes own component visuals. |
Values | Semantic and component --n-* variables remain the canonical customization layer. |
Overrides | Customizable slots merge consumer className values with tailwindCn so conflicting utilities resolve deterministically. |
Residual CSS | Only shared keyframes and scoped no-Preflight compatibility rules remain; there is no parallel visual selector layer. |
Design notes
- InputGroup owns shared presentation, never value, parsing, validation, results, or asynchronous behavior.
Do / do not
Related components
Tokens
These are the primary customization points. Override semantic or component tokens instead of changing component source.
| Token | Purpose |
|---|---|
--n-input-height-md | Public customization point for this component contract. |
--n-input-radius | Public customization point for this component contract. |
--n-input-background | Public customization point for this component contract. |
--n-input-background-hover | Public customization point for this component contract. |
--n-input-border | Public customization point for this component contract. |
--n-input-border-hover | Public customization point for this component contract. |
--n-input-border-focus | Public customization point for this component contract. |
--n-input-border-danger | Public customization point for this component contract. |
--n-input-addon-foreground | Public customization point for this component contract. |
--n-input-addon-gap | Public customization point for this component contract. |
--n-input-addon-padding-inline | Public customization point for this component contract. |
--n-focus-ring | Public customization point for this component contract. |