InputGroup
One ring around an input and its addons: a URL prefix, a suffix, a leading icon or trailing buttons.
Examples
Prefix and suffix
Addons are read-only text and hidden from screen readers; the label must still make sense.
Agents connect to this address.
<Field id="endpoint-name" label="Endpoint name" hint="Agents connect to this address.">
<InputGroup name="slug" value="github" prefix="mcp.switchboard.dev/" suffix="/mcp" monoAddons mono />
</Field>Icon and actions
<InputGroup icon="search" type="search" aria-label="Search servers" placeholder="Search servers" />
<InputGroup
aria-label="Server URL"
value="https://api.githubcopilot.com/mcp"
readOnly
mono
actions={<IconButton icon="copy" label="Copy URL" size="sm" />}
/>Usage
import { InputGroup } from '@switchboard/ui'
<Field id="server-url" label="Server URL">
<InputGroup name="url" prefix="https://" monoAddons mono />
</Field>Props
Every component also takes mix, for css() and mixins applied after its own style.
InputGroup
| Prop | Type | Default | Description |
|---|---|---|---|
| prefix | RemixNode | – | Leading text addon, e.g. "https://". aria-hidden. |
| suffix | RemixNode | – | Trailing text addon, e.g. "/mcp". aria-hidden. |
| icon | IconName | – | Leading icon inside the field, with no addon fill. |
| actions | RemixNode | – | Trailing buttons inside the ring, usually small IconButtons. |
| size | 'sm' | 'md' | 'lg' | 'md' | Height 28, 32 or 36px. |
| invalid | boolean | – | aria-invalid on the input and a danger ring. Defaults to the Field error. |
| mono | boolean | – | Plex Mono in the input. |
| monoAddons | boolean | – | Plex Mono in the prefix and suffix, for URL fragments. |
Also accepts every <input> attribute; they go on the inner input. mix goes on the outer ring. Reads Field context.
Accessibility
- Prefix and suffix are aria-hidden, so the label or hint must say what the full value looks like.
- The focus ring wraps the whole group while the input has focus.
- Buttons in actions are separate tab stops after the input and need their own names.
Guidance
Do
- Use a prefix for a fixed part of the value people should not type.
- Keep actions to one or two icon buttons.
Don’t
- Put essential instructions in an addon.
- Use addons as decoration on ordinary text fields.