Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.
Copyright © 2018-2025 Sea Labs
InputGroup
Designer doc
Helper component to wrap a set of inputs (e.g. Button, TextField).
Example
Basic Usage
View code
Gap
By default, all inputs are compacted without any spaces. You can specify gap prop to have some spaces between each.
View code
Corner
By default, InputGroup cornerize rounded corner between each input if gap is 0. You can specify corner to false to hard set the value.
View code
Separator
By default, InputGroup does not have a separator between the buttons. You can specify gap to 0 for a separator.
- text variants: separators only visible against a dark background i.e. in dark mode.
- outlined variants: do not require a separator as the buttons are already separated by their outline.
View code
More Examples
View code
References
- Material-UI: https://material-ui.com/components/button-group/
- Ant Design: https://ant.design/components/input/#components-input-demo-group
API
InputGroup
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| corner | boolean | ||
| gap | number | -1 | When gap is set to 0, separator will be rendered |