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
TreeMultiSelect
Designer doc
This is a combination of TreeSelect and MultiSelect components.
Example
Basic Usage
The default behaviour is only selected option is checked/unchecked without partially checkbox status
View code
An icon button can be used to trigger dropdown selection too.
View code
Search
View code
Control Tree Checked Status
value of type Array<[SelectValue, Value]> can be provided to control the Tree checkbox selected status, with the tree option’s value as SelectValue, and Checkbox value true, false and null(partially selected) as Value
Note: might need to control initialExpandedValues and expandedValues to show the correct option value at TreeMultiSelectInput
View code
Input Text and Max Tag
Similar to MultiSelect, two common input components TreeMultiSelectInputText and TreeMultiSelectInputMaxTag is also provided
View code
Customization
TreeMultiSelectSearch and TreeMultiSelectChip is available for customization
View code
Dependent Child Options
By specifying isChildrenDependent, child options under selected parent will be shown as selected and disabled
View code
References
- WAI-ARIA: Keyboard Interactions and Roles, States, and Properties
- Ant Design: Tree and TreeSelect
- Material-UI: TreeView
- Vue: TreeSelect
API
TreeMultiSelect
| Prop name | Type | Default | Description |
|---|---|---|---|
| expandedValues | SelectValue[] | ||
| id | string | ||
| initialExpandedValues | SelectValue[] | ||
| initialIsOpen | boolean | ||
| initialKeyboardHighlightedIndex | number | ||
| initialMouseHighlightedIndex | number | ||
| initialSearchValue | string | ||
| initialSelectedIndex | number | ||
| initialValue | TreeMultiSelectValue | [] | |
| isChildrenDependent | boolean | ||
| isOpen | boolean | ||
| keyboardHighlightedIndex | number | ||
| mouseHighlightedIndex | number | ||
| onChange | ChangeCallback | ||
| onExpandedValuesChange | (expanded: SelectValue[]) => void | ||
| onIsOpenChange | (isOpen: boolean) => void | ||
| onKeyboardHighlightedIndexChange | (index: number) => void | ||
| onMouseHighlightedIndexChange | (index: number) => void | ||
| onSearch | SearchCallback | ||
| onSelect | ChangeCallback | Different from onChange: onSelect is triggered even if the option's value is the selected one. | |
| onSelectedIndexChange | (index: number) => void | ||
| searchValue | string | This is not the selected value. Rather, it's a search value on input if you use SelectSearch. | |
| selectedIndex | number | ||
| stateReducer | AcdcStateReducer | (state, { nextState }) => nextState | |
| value | TreeMultiSelectValue |
TreeMultiSelectChip
| 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. | |
| value | SelectValue | ||
| variant | ChipVariants |
TreeMultiSelectHighlighter
| Prop name | Type | Default | Description |
|---|---|---|---|
| text | string |
TreeMultiSelectIconButton
| 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. | |
| badgeCount | number | ||
| badgeProps | Omit<BadgeProps, "children"> | ||
| 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. | |
| 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 |
TreeMultiSelectInput
| 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. | |
| disableChipNavigation | boolean | ||
| disabled | boolean | Equivalent to button's disabled property. | |
| inputChipListProps | InputChipListProps & { ref?: Ref<HTMLDivElement>; } | ||
| 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 | ||
| renderChip | (val: SelectValue, i: number) => ReactNode | Renders chips per value when MultiSelect is open | |
| searchElement | ReactNode | <TreeMultiSelectSearch /> |
TreeMultiSelectInputMaxTag
| 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. | |
| disableChipNavigation | boolean | ||
| disabled | boolean | Equivalent to button's disabled property. | |
| inputChipListProps | InputChipListProps & { ref?: Ref<HTMLDivElement>; } | ||
| keyboardClickKeys | string[] | ||
| label | ReactNode | ||
| limit | number | ||
| 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 | ||
| renderChip | (val: SelectValue, i: number) => ReactNode | Renders chips per value when MultiSelect is open | |
| searchElement | ReactNode | ||
| tooltipProps | Omit<TooltipProps, "title" | "children"> & { children?: ReactNode; title?: ReactNode; } |
TreeMultiSelectInputText
| 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. | |
| contentProps | ContentProps | ||
| disableChipNavigation | boolean | ||
| disabled | boolean | Equivalent to button's disabled property. | |
| inputChipListProps | InputChipListProps & { ref?: Ref<HTMLDivElement>; } | ||
| 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 | ||
| renderChip | (val: SelectValue, i: number) => ReactNode | Renders chips per value when MultiSelect is open | |
| renderText | (val: MultiSelectValue) => ReactNode | Renders displayed text when MultiSelect is closed | |
| searchElement | ReactNode | ||
| tooltipProps | Omit<EllipsisTooltipProps, "children"> & { children?: ReactNode; } |
TreeMultiSelectList
| Prop name | Type | Default | Description |
|---|---|---|---|
| acdcScrollerPropsOptions | UseAcdcScrollerPropsOptions | Options for the useAcdcScrollerProps hook | |
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| container | HTMLElement | ||
| containerProps | DivProps | ||
| elevationLevel | number | ||
| emptyPlaceholder | ReactNode | ||
| footer | ReactNode | ||
| header | ReactElement<any, any> | ||
| immediate | boolean | ||
| lined | boolean | ||
| placement | "left" | "right" | "bottom" | "top" | "top-start" | "top-end" | "left-start" | "left-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | ||
| popperReference | HTMLElement | ||
| popperUpdateKey | string | ||
| width | SelectListWidth |
TreeMultiSelectListFooter
| 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. |
TreeMultiSelectListSearch
| 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. | |
| autoComplete | "on" | "off" | "nope" | ||
| disabled | boolean | ||
| fullWidth | boolean | width: 100% is too troublesome to handle with custom css because of the nesting | |
| invalid | boolean | ||
| leftElement | ReactNode | ||
| leftElementContainerProps | HTMLAttributes<HTMLDivElement> & { ref?: MutableRefObject<HTMLDivElement>; } | ||
| onChange | (e: ChangeEvent<HTMLInputElement>) => void | ||
| onTextChange | (val: string) => void | ||
| placeholder | ReactNode | ||
| readOnly | boolean | ||
| rightElement | ReactNode | ||
| rightElementContainerProps | HTMLAttributes<HTMLDivElement> & { ref?: MutableRefObject<HTMLDivElement>; } | ||
| type | "number" | "text" | "password" | ||
| wrapperProps | WrapperProps |
TreeMultiSelectOption
| 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. | |
| checkboxIconProp | CheckboxIconProps | ||
| childrenNodesProps | ChildrenNodesProps | ||
| disabled | boolean | ||
| expandButton | ReactNode | ||
| index | number | ||
| label | ReactNode | <>{value}</> | |
| leftElement | ReactNode | ||
| nodeProps | NodeProps | ||
| value | SelectValue |
TreeMultiSelectOptionExpand
| 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. | |
| 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 |
TreeMultiSelectSearch
| 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. |
TreeMultiSelectSearchableNodes
| Prop name | Type | Default | Description |
|---|---|---|---|
| data | TreeData | ||
| filter | (node: TreeNode, query: string) => boolean | Different from FilterNode in utils. | |
| renderFromData | (data: TreeData) => ReactNode | ||
| resetExpandedTo | SelectValue[] | ||
| skip | boolean | ((query: string) => boolean) |