InputGroup
A labeled input with logical start/end content, keeping native control and action behavior.@gemologic/sheen · formsPlayground
USD
<InputGroup label="Amount (USD)" inputMode="decimal" endContent="USD" />Variant matrix
Amount with unit
USD
Anatomy
- Package
@gemologic/sheen- Source
packages/ui/src/primitives/InputGroup.tsx- Tokens
--sheen-color-bg-inset--sheen-color-fg-muted--sheen-color-border-control--sheen-space-inline-sm
Accessibility
Role: native input with separate native actionsKeyboard: Tab follows start action, input, end action in DOM order, Native text editingDo
- Include meaningful units in the label or associated instructions; adjacent text is not automatically part of the accessible name.
- Use labeled Buttons for actions and own their disabled state.
Do not
- Do not hide interactive addons from assistive technology.
- Do not wrap InputGroup in another Field; its label and error are already included.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
startContent | JSX.Element | — | Leading text or action. Supply accessible labels for actions and aria-hidden for purely decorative content. |
endContent | JSX.Element | — | Trailing text or action. Actions own their disabled state independently of the input. |
label * | string | — | Required visible input label. |
description | string | — | Instructions associated with the input. |
error | string | — | App-owned validation message associated with the invalid input. |