Input Group
Visually joins a TextInput and a Button into a single connected control, merging their borders so they read as one cohesive unit. Useful for subscribe forms, URL inputs, and other patterns where an input and its action belong together.
1<InputGroup>
2 <TextInput placeholder="you@example.com" />
3 <Button color="neutral">Subscribe</Button>
4</InputGroup>
5
Usage
1import { InputGroup, TextInput, Button } from "atlas";
2
3<InputGroup>
4 <TextInput placeholder="you@example.com" />
5 <Button color="neutral">Subscribe</Button>
6</InputGroup>
7
Examples
Default
The default
InputGroup visually joins a TextInput and a Button into a single connected control.1<InputGroup>
2 <TextInput placeholder="you@example.com" />
3 <Button color="neutral">Subscribe</Button>
4</InputGroup>
5
Disabled
Set
disabled on the group to disable both the input and the button at once, rather than disabling each child individually.1<InputGroup disabled>
2 <TextInput placeholder="you@example.com" />
3 <Button color="neutral">Subscribe</Button>
4</InputGroup>
5
API Reference
| Prop | Type | Default |
|---|---|---|
| disabled | boolean | false |
| children | ReactNode | - |
- Text Input for standalone text entry fields
- Button for standalone action triggers