Live Code
Storybook
Usage
InputAddon
InputAddon is a layout wrapper for controls placed beside an input inside InputContainer (for example a password visibility toggle or trailing icon button).
Basic Usage
import { InputAddon, InputContainer } from '@alma-oss/spirit-web-react';
<InputContainer size="medium">
<input id="example" type="password" name="example" placeholder="Password" />
<InputAddon>{/* e.g. ControlButton */}</InputAddon>
</InputContainer>
When the addon is non-interactive (icon or currency text only), render it as a <label> so clicks focus the field:
<InputContainer size="medium">
<InputAddon elementType="label" htmlFor="amount-eur">
<span aria-hidden="true">€</span>
</InputAddon>
<input id="amount-eur" type="text" name="amountEur" placeholder="0,00" inputMode="decimal" />
</InputContainer>
Do not use elementType="label" when the addon wraps a <button> or <a>.
Size Source and Precedence
InputAddon resolves size in this order:
- direct size prop on InputAddon
- size from parent ContextPropsProvider context (e.g. from TextFieldBase)
- default medium size
This keeps addon content visually aligned with the surrounding InputContainer in composed form-field components, while standalone usage can still set size explicitly.
ℹ️ Nested Icon and ControlButton components use the resolved InputAddon size by default, so explicit boxSize of the Icon or size of the ControlButton is usually unnecessary when the addon is inside a form field.
API
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| children | ReactNode | — | ✕ | Addon content (commonly a control button) |
| elementType | ElementType | div | ✕ | Element used as the addon wrapper |
| htmlFor | string | — | ✕ | Same as label htmlFor: sibling control id; use with elementType="label" |
| size | Size dictionary | medium | ✕ | Size of the Addon; overrides context when provided |
On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches. For controlling inherited and shared props from ancestors, use context props mechanisms.
For detailed information see InputAddon in the web package.