Usage
Input Group Add-on belongs inside an Input Group with exactly one direct Nord Input or Textarea. Its text, icons, keyboard hints, spinners, buttons, dropdowns, and tooltips retain their own semantics and interaction.
import "@nordhealth/components/lib/InputGroupAddon"
Composition
An Input Group Add-on occupies one logical edge around the Input Group's single text control. The parent group coordinates its position, size, and focus-forwarding behaviour while interactive descendants retain their own semantics and interaction.
Examples
Position and size
Set position to inline-start (default), inline-end, block-start, or block-end. Logical positions mirror with writing direction while DOM and keyboard order stay unchanged. The parent group provides the effective s, m, or l typography, line height, spacing, and target geometry so add-on text matches the nested control.
Short prefixes, suffixes, units, and status content work best. Put longer guidance in Field Description or hint content. Direct Button and Dropdown children keep their own control sizing and padding; actions are never implicitly disabled by group state.
Accessibility
Noninteractive add-on space forwards pointer focus to the text control. Buttons, links, and menu triggers retain independent keyboard and pointer behavior, so give icon-only actions an accessible name and disable them explicitly when unavailable. Keep interactive children in the source order users should encounter them.
API reference
InputGroupAddon
Positions reusable Nord content around the text control in an Input Group. Its children retain their native semantics and interaction behavior.
<nord-input-group-addon></nord-input-group-addon>Props
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
position | position | Logical position around the grouped text control. | InputGroupAddonPosition | 'inline-start' |
Slots
| Slot name | Description |
|---|---|
Default slot | Text, icons, keyboard hints, spinners, buttons, dropdowns, or other reusable content. |