'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Forms
InputGroup
Joins fields, selects and buttons into one row with shared borders: an amount and its currency, a search and its button, a protocol and a domain.
import { InputGroup, TextField, Select, Button } from '@alea/ui';
Examples
InputGroup
Controls joined into one row: an amount with its currency, a search with its button, a protocol with a domain.
Anatomy
The parts of the component and the class that styles each one.
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Size
--alea-size-field…
Props
InputGroup props
Joins several controls into one row with shared borders: amount and currency, search and button, prefix select and text.
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactNode | - | Fields, selects and buttons to join into one control, like an amount and its currency, or a search and its button. |
aria-label | string | - | Name of the group for screen readers, when there is no visible label. |
aria-labelledby | string | - | Id of a visible label for the group. |
className | string | - | Extra class names. |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
- States
- Focus insideOpenKeyboard focus
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-input-group
Accessibility
- A group: name it with aria-label or aria-labelledby so the parts are read as one.
- Each control keeps its own label (visible or aria-label).
Keyboard
| Key | Does |
|---|---|
| Tab | Moves through the controls in order |
Do and don't
Do
- Join controls that set one value together.
Don't
- Don't join unrelated fields just to save space.