Input Group Blocks
Reach for these blocks when a plain field is not enough and the input needs surrounding controls, affordances, or compositional UI around the core value entry.
Basic Input Group
End Icon
Start Text
End Text
Start And End Text
End Tooltip
Keyboard Shortcut
With Inner Label
Disabled
Loading Spinner
With Textarea
With Icon Button
With Button
With Badge
With Badge And Menu
Mini Editor Group Toggle
With Search
With Start Tooltip
With Clear Button
Search Input With Loader And Voice
With Character Count
Enter a password. Must contain:
- At least 8 characters - Requirement not met
- At least 1 number - Requirement not met
- At least 1 lowercase letter - Requirement not met
- At least 1 uppercase letter - Requirement not met
Password Input With Strength Indicator
Code Snippet With Language Selector
Message Composer With Attachments
Press Enter to send
Chat Input With Voice And Send Button
With Start Text End Tooltip
Input Group With Mimicking URL Bar
With Keyboard Shortcut Search
Start Loading Spinner
End Loading Spinner