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 dlx 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.
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
Do
Use explicit Field, Label, or aria-describedby context and keep decorative addons hidden from assistive technology.
Do not
Move validation, search results, password visibility, parsing, or asynchronous behavior into InputGroup.
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. |