Input Group
Composite input components with addons, icons, and buttons. Defaults to a tray surface on the white canvas (Mode A), with capsule variants for inverted sections.
Default Input Group
Standard input group with rounded corners and subtle shadow.
Input Group Variants
Different visual styles to match various contexts.
Text Addons
Input groups with text prefixes and suffixes.
With Buttons
Input groups with interactive button addons.
Keyboard Shortcuts
Input groups showing keyboard shortcut indicators.
Chat Input Pattern
A common pattern for messaging interfaces.
Textarea Input Group
Multi-line text input within a group container.
Description
Form Context
Input groups used within a typical form layout.
Best Practice: Context-Aware Variants
Choose input group variants based on background context for optimal contrast.
On White Background → Tray Variant
On Tray Background → Default Variant
Error State
Input group displaying validation error.
Please enter a valid email address.