Developer mode
Opens components on the React tab by default.
Your bookmarks

InputGroup

Combines related inputs for a form.

When you have multiple input fields for related information, such as a date of birth with a day, a month, and a year, group them together to make it clear theyโ€™re about the same thing. This lets you label and validate the group as a whole, rather than just individual fields.

Component status

Figma
Designing
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Sketch
Released

Content structure

Label: provides a clear description of what users should fill in; input divider: clearly separates inputs within the group; Select (component): specifies options users can choose from. InputField (component): specifies one type of input expected of users; error: guides users on how to solve any problems and overrides errors for individual inputs in the group.