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	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	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	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	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	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	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	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	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)

Example

Basic Usage

Control Tree Checked Status

Input Text and Max Tag

Customization

Dependent Child Options

References

API

TreeMultiSelect

TreeMultiSelectChip

TreeMultiSelectHighlighter

TreeMultiSelectIconButton

TreeMultiSelectInput

TreeMultiSelectInputMaxTag

TreeMultiSelectInputText

TreeMultiSelectList

TreeMultiSelectListFooter

TreeMultiSelectListSearch

TreeMultiSelectOption

TreeMultiSelectOptionExpand

TreeMultiSelectSearch

TreeMultiSelectSearchableNodes

Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.

Designer

Get started Foundation Components

Developer

Get started Foundation Components

Blogs

All blogs

About us

Coral Team Contact and newsletter

Resources

Figma UI kit Icon library Coral branding

TreeMultiSelect

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

An icon button can be used to trigger dropdown selection too.

Search

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

Input Text and Max Tag

Similar to MultiSelect, two common input components TreeMultiSelectInputText and TreeMultiSelectInputMaxTag is also provided

Customization

TreeMultiSelectSearch and TreeMultiSelectChip is available for customization

Dependent Child Options

By specifying isChildrenDependent, child options under selected parent will be shown as selected and disabled

References

API

TreeMultiSelect

Different from onChange: onSelect is triggered even if the option's value is the selected one.

This is not the selected value. Rather, it's a search value on input if you use SelectSearch.

TreeMultiSelectChip

Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.

Description to show for capsule-large choice and filter chips.

Equivalent to button's disabled property.

Order index for keyboard navigation using arrow keys. By default, this prop is automatically added by the parent.

Element to be added on the left side of the label. Equivalent to adding the element manually on the label with a certain margin.

Callback on Backspace key or delete icon is clicked. If this callback is not provided, icon is not rendered - meaning it's not deletable.

Callback that's triggered after click i.e. mouseup and keyup of enter or space.

Element to be added on the right side of the label. Equivalent to adding the element manually on the label with a certain margin.

TreeMultiSelectHighlighter

TreeMultiSelectIconButton

Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.

Set color based on theme. If color is specified, that prop is used instead of this.

Equivalent to button's disabled property.

Callback that's triggered after click i.e. mouseup and keyup of enter or space.

TreeMultiSelectInput

Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.

Equivalent to button's disabled property.

Callback that's triggered after click i.e. mouseup and keyup of enter or space.

Renders chips per value when MultiSelect is open

TreeMultiSelectInputMaxTag

Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.

Equivalent to button's disabled property.

Callback that's triggered after click i.e. mouseup and keyup of enter or space.

Renders chips per value when MultiSelect is open

TreeMultiSelectInputText

Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.

Equivalent to button's disabled property.

Callback that's triggered after click i.e. mouseup and keyup of enter or space.

Renders chips per value when MultiSelect is open

Renders displayed text when MultiSelect is closed

TreeMultiSelectList

Options for the useAcdcScrollerProps hook

Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.

TreeMultiSelectListFooter

Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.

TreeMultiSelectListSearch

Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.

width: 100% is too troublesome to handle with custom css because of the nesting

TreeMultiSelectOption

Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.

TreeMultiSelectOptionExpand

Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.

Set color based on theme. If color is specified, that prop is used instead of this.

Equivalent to button's disabled property.

Callback that's triggered after click i.e. mouseup and keyup of enter or space.

TreeMultiSelectSearch

Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.

TreeMultiSelectSearchableNodes

Different from FilterNode in utils.