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
Field
Designer doc
Field component act as a wrapper of other components.
Example
Basic usage
View code
References
- WAI-ARIA: https://www.w3.org/WAI/tutorials/forms/grouping/#associating-related-controls-with-wai-aria
API
Field
| 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. | |
| containerProps | InnerProps | ||
| invalid | boolean | ||
| label | ReactNode | ||
| labelPosition | LabelPositions | top | |
| labelProps | InnerProps | ||
| labelWidth | string | number | ||
| message | ReactNode | ||
| messageProps | InnerProps | ||
| required | boolean | ||
| wrapperProps | InnerProps |
parts
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | void | WebTarget | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| forwardedAs | void | WebTarget | ||
| theme | DefaultTheme |