Mushilu-San UI Input group
Joins an input with text or icon addons, such as a currency sign or a unit.
Selector: mui-input-group
import { InputGroup, InputGroupAddon } from '@mushilu-san/ui/forms';Loading example…
Overview
muiInput and one or more mui-input-group-addon elements in a single bordered box. The addons sit visually attached to the input.
size and invalid state with the inputs inside it, so a single invalid state styles the whole box.
When to use
A value with a unit or currency, such as "$" or "kg". A URL or address with a fixed prefix.
When not to use
Plain inputs with no fixed text around them. Use an input. Use Input instead.
Guidelines
Do
Make the addon text meaningful, such as "USD". Keep addons short. One or two characters or a word.
Don't
Do not put interactive controls in an addon. Use a button outside the group.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
host | — |
Keyboard
| Keys | Action |
|---|---|
| TabShiftTab |
Make the addon meaningful to screen reader users. Name the input for the unit, for example "Price in USD".
API
InputGroup
| Name | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | Size of the input and addons inside the group: `sm`, `md` or `lg`. Default `md`. |
invalid | boolean | false | Shows the failed-validation style on the whole group. Accepts attribute presence, e.g. <… invalid>. |
CSS parts
::part(root)
InputGroupAddon
CSS parts
::part(addon)
Tokens
--mui-color-surface--mui-color-border--mui-color-text-muted--mui-radius-md