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
Blogs
All blogsAttachment
The Attachment component is a highly flexible compound component designed for file uploads. Its modular structure allows you to seamlessly embed upload functionality into different parts of your page layout, giving you full control over UI placement.
Example
Attachment component is designed to be the wrapper of the sub-components like AttachmentInput and AttachmentItem, make sure you wrap all sub-components under <Attachment>.
Basic Usage
The Attachment component requires a uid property on every file object to correctly identify and manage files (e.g., for deletion).
- Initial Files: You must manually ensure any pre-loaded files have a unique uid.
- New Uploads: Files added via AttachmentInput at runtime will automatically be assigned a unique uid.
View code
Single-row layout
Use AttachmentGroupRow to wrap the AttachmentItems in a single row for small viewport.
View code
Grid layout
Use AttachmentGroupGrid to wrap the AttachmentItems in a grid layout for large viewport. Number of columns and overflow behavior can be controlled by columns and overflow properties.
View code
Integrate with Composer
View code
Do note that you can also use AttachmentItem component directly to render a single file item.
View code
Drop Area
By using AttachmentDropArea component, you can add a drop area to capture file drops from users. Also, it can accept a container prop so you can attach it under any container you want. Interact with the drop area by dragging and dropping files onto to the container below.
View code
Relevant components
API
Attachment
| Prop name | Type | Default | Description |
|---|---|---|---|
| accept | string | string[] | ['image/*', '.pdf', '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx'] | |
| files | T[] | ||
| initialFiles | T[] | [] as T[] | |
| maxSize | number | ||
| minSize | number | ||
| onChange | (files: T[]) => void | ||
| onDrop | (acceptedFiles: T[], rejectedFiles: T[], event: DropEvent) => void |
AttachmentDropArea
| Prop name | Type | Default | Description |
|---|---|---|---|
| container | HTMLElement | ||
| image | ReactNode | <Attachments /> | |
| title | ReactNode |
AttachmentGroupGrid
| 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. | |
| columns | number | 3 | |
| overflow | boolean | Whether to enable overflowY to scroll the grid vertically. |
AttachmentGroupRow
| 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. | |
| itemsContainerProps | HTMLAttributes<HTMLDivElement> | ||
| leftButtonProps | IconButtonProps | ||
| outerContainerProps | HTMLAttributes<HTMLDivElement> | ||
| rightButtonProps | IconButtonProps |
AttachmentInput
| 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. | |
| colorType | ColorTypes | Set color based on theme. If color is specified, that prop is used instead of this. | |
| disabled | boolean | Equivalent to button's disabled property. | |
| inputProps | HTMLAttributes<HTMLInputElement> | ||
| keyboardClickKeys | string[] | ||
| loading | boolean | ||
| onBlur | FocusEventHandler<HTMLDivElement> | ||
| onClick | MouseEventHandler<HTMLDivElement> | ||
| onKeyDown | KeyboardEventHandler<HTMLDivElement> | ||
| onKeyUp | KeyboardEventHandler<HTMLDivElement> | ||
| onMouseDown | MouseEventHandler<HTMLDivElement> | ||
| onMouseLeave | MouseEventHandler<HTMLDivElement> | ||
| onMouseUp | MouseEventHandler<HTMLDivElement> | ||
| onRelease | EventHandler<SyntheticEvent<HTMLDivElement, Event>> | Callback that's triggered after click i.e. mouseup and keyup of enter or space. | |
| onTouchEnd | TouchEventHandler<HTMLDivElement> | ||
| onTouchStart | TouchEventHandler<HTMLDivElement> | ||
| radius | string | ||
| size | IconButtonSizes | ||
| tooltip | ReactNode | ||
| tooltipProps | Omit<TooltipProps, "title" | "children"> | ||
| variant | IconButtonVariants |
AttachmentItem
| 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 |