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 blogsAutoComplete
Designer doc
AutoComplete its an enhanced input component which helps user with a list of suggested options
Example
Single Text
By default AutoComplete its a controlled single-line textbox, which only allow predefined values through AutoCompleteOption.
View code
To allow it preserve arbitrary values that user types in, you might specify isFreeText to true. Additionally, inputValue & onInputChange props combination are more recommended over value & onChange props combination in such case, since value will only be updated when selecting an option with predefined value.
By playing around with the example below, you will see that inputValue will be synced up with the text in the input box in a real time manner, while value is not be updated when you are typing.
View code
Multiple values
To allow multiple format, you might specify isMultiple to true. Selected values will be displayed in chips format and saved through value prop. More over, value will be required to pass in string[] type which the onChange function will take in the same type as its param.
View code
To allow both selected chips + search keyword be preserved, you might also set isFreeText to true. This will make sure inputValue is not cleared when the combobox lose focus.
View code
openOnClick
By default, clicking on the input box without inputValue will not open the dropdown, you might change this behavior by setting openOnClick to true.
View code
Customization
There are some customization you might consider to suit your use case.
AutoComplete Ellipsis Tooltip and AutoComplete Tooltip
You can use AutoCompleteEllipsisTooltip to achieve similar result with EllipsisTooltip. There are 2 main differences. Firstly, AutoCompleteEllipsisTooltip will position the tooltip on the right in the AutoCompleteList, and top in AutoCompleteInput. Secondly, AutoCompleteEllipsisTooltip is capable of retaining focus, which is crucial to ensure that the component remains unaffected when it is clicked.
You can use AutoCompleteTooltip for more flexibility. AutoCompleteTooltip is also capable of retaining focus, making it interactable without affecting the main component.
View code
Integrate with API query
For example, after getting the data from an api call, you might want to decide only open the dropdown list based on the number of options.
View code
Add option
To make the data source more flexible, you might want to allow new options based on the user’s input. In the example below, you can try typing names that are not part of the predefined data source and select them
View code
Customized render
Also, the ui rendered in the dropdown list and input box can both be customized.
View code
Popup position
By default AutoCompleteList popup is placed by referencing to AutoCompleteInput, the dropdown reference can be modified via popperReference.
View code
References
API
AutoComplete
| Prop name | Type | Default | Description |
|---|---|---|---|
| id | string | ||
| initialInputValue | string | ||
| initialIsOpen | boolean | ||
| initialValue | string | string[] | ||
| inputValue | string | ||
| isFreeText | boolean | ||
| isMultiple | boolean | ||
| isOpen | boolean | ||
| onChange | ((values: string[]) => void) | ((val: string) => void) | ||
| onInputChange | (val: string) => void | ||
| onIsOpenChange | (isOpen: boolean) => void | ||
| openOnClick | boolean | by default,clicking input box will not open dropdown, it will be opened after user starts typing, if set to true, click will trigger the dropdown open directly | |
| stateReducer | AcdcStateReducer | (state, { nextState }) => nextState | |
| value | string | string[] |
AutoCompleteChip
| 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. | |
| clickable | boolean | ||
| description | ReactNode | Description to show for capsule-large choice and filter chips. | |
| disableNavigation | boolean | ||
| disabled | boolean | Equivalent to button's disabled property. | |
| ellipsisTooltipProps | Omit<EllipsisTooltipProps, "children"> | {} | |
| index | number | Order index for keyboard navigation using arrow keys. By default, this prop is automatically added by the parent. | |
| invalid | boolean | ||
| keyboardClickKeys | string[] | ||
| leftElement | ReactNode | Element to be added on the left side of the label. Equivalent to adding the element manually on the label with a certain margin. | |
| onBlur | FocusEventHandler<HTMLDivElement> | ||
| onClick | MouseEventHandler<HTMLDivElement> | ||
| onDelete | (e: SyntheticEvent<HTMLDivElement, Event>) => void | Callback on Backspace key or delete icon is clicked. If this callback is not provided, icon is not rendered - meaning it's not deletable. | |
| 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> | ||
| rightElement | ReactNode | Element to be added on the right side of the label. Equivalent to adding the element manually on the label with a certain margin. | |
| rippleProps | RippleProps | Props to customize ripple effect, which is reusing Ripple component in coral | |
| tabIndex | number | -1 | |
| value | string | ||
| variant | ChipVariants |
AutoCompleteEllipsisTooltip
| Prop name | Type | Default | Description |
|---|---|---|---|
| active | boolean | ||
| arrow | ArrowProps | ||
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| closeDelay | number | ||
| container | HTMLElement | ||
| containerProps | InnerProps | ||
| contentProps | InnerProps | ||
| immediate | boolean | ||
| initialActive | boolean | ||
| initialImmediate | boolean | ||
| isolated | boolean | ||
| maxRows | number | ||
| offset | [number, number] | ||
| onActiveChange | (active: boolean) => void | ||
| onImmediateChange | (immediate: boolean) => void | ||
| onOverflowChange | (overflow: boolean) => void | ||
| openDelay | number | ||
| overflow | boolean | ||
| placement | "left" | "right" | "bottom" | "top" | "top-start" | "top-end" | "left-start" | "left-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | ||
| popperOptions | PopperPopperOptions | Options for floating.ui instance | |
| popperUpdateKey | string | ||
| renderChild | (child: any, handlers: any, ariaAttrs: any) => ReactNode | ||
| springConfig | Partial<AnimationConfig> | ||
| stayOpenOnHover | boolean | ||
| title | ReactNode | ||
| titleContainerProps | HTMLAttributes<HTMLDivElement> | ||
| variant | TooltipVariants |
AutoCompleteHighlighter
| Prop name | Type | Default | Description |
|---|---|---|---|
| text | string |
AutoCompleteInput
| 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. | |
| children | ReactNode | children props only available when isMultiple = true, which will allow you to customize the chips | |
| chipListProps | ChipListProps | ||
| disableChipNavigation | boolean | ||
| disabled | boolean | Equivalent to button's disabled property. | |
| fullWidth | boolean | ||
| inputProps | AutoCompleteSearchProps & { ref?: MutableRefObject<HTMLInputElement>; } | ||
| keyboardClickKeys | string[] | [] | |
| 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> | ||
| placeholder | ReactNode |
AutoCompleteList
| 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 |
AutoCompleteOnMount
AutoCompleteOption
| 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. | |
| disabled | boolean | ||
| index | number | ||
| value | string |
AutoCompleteScroller
| 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. | |
| container | HTMLElement | configs.getPortalContainer('AutoCompleteList', 'container') | |
| elevationLevel | number | 1 | |
| immediate | boolean | ||
| placement | "left" | "right" | "bottom" | "top" | "top-start" | "top-end" | "left-start" | "left-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | bottom | |
| popperReference | HTMLElement | ||
| popperUpdateKey | string | ||
| width | SelectListWidth |
AutoCompleteSearch
| 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. |
AutoCompleteTooltip
| Prop name | Type | Default | Description |
|---|---|---|---|
| active | boolean | ||
| arrow | ArrowProps | ||
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| closeDelay | number | ||
| container | HTMLElement | ||
| immediate | boolean | ||
| initialActive | boolean | ||
| initialImmediate | boolean | ||
| isolated | boolean | ||
| offset | [number, number] | ||
| onActiveChange | (active: boolean) => void | ||
| onImmediateChange | (immediate: boolean) => void | ||
| openDelay | number | ||
| placement | "left" | "right" | "bottom" | "top" | "top-start" | "top-end" | "left-start" | "left-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | ||
| popperOptions | PopperPopperOptions | Options for floating.ui instance | |
| popperUpdateKey | string | ||
| renderChild | (child: any, handlers: any, ariaAttrs: any) => ReactNode | ||
| springConfig | Partial<AnimationConfig> | ||
| stayOpenOnHover | boolean | ||
| title | ReactNode | ||
| titleContainerProps | HTMLAttributes<HTMLDivElement> | ||
| variant | TooltipVariants |