Collect one value and submit it with one action: email capture, a waitlist, a newsletter. Inset holds the Button inside one frame that takes Input’s border states; adjacent sets an Input-styled entry beside the Button. The Button keeps its own states and corners in both. Use it in place of an action group when the next step needs exactly one value.
The surrounding heading names what is collected, so the entry carries an aria-label; the placeholder is only a hint. Enter submits.
| Example | Arrangement | Usage |
|---|---|---|
| Inset | One framed control: heroes and closing sections where the field stands alone | |
| Adjacent | Entry and Button at one height: footers, and rows beside other controls |
| Example | Size | Usage |
|---|---|---|
| Small | Footers and dense sidebars | |
| Medium | Inline in body content | |
| Large | Hero and closing sections, in place of the action group |
| Example | State |
|---|---|
| Hover | |
| Focus, adjacent | |
| Focus | |
Enter an email address like name@company.com | Invalid |
| Loading | |
| Disabled |
Too narrow for one line, the action drops below the entry and fills the frame. Rounded is the shape axis for systems whose Buttons are rounded; frame and Button both take full radius.