12.24.0

Multi Level Select

Default


The MultiLevelSelect kit renders a multi leveled select dropdown based on data from the user. treeData is a required prop that is expected to contain the data in the form of an array of objects. See code snippet for an example data array.

For the React version of the kit, the onSelect prop returns an array of all checked items, irrespective of whether it is a parent, child or grandchild. Open the console on this example and check and uncheck checkboxes to see this is action!

For the Rails version, the array of checked items is attached to the DOM in a data attribute titled data-tree on the wrapping div around the MultiLevelSelect.

Return All Selected


The returnAllSelected or return_all_selected prop can be used when users want data on all checked nodes from the dropdown, irrespective of whether it is a parent or child node.

NOTE :This variant also does not automatically uncheck the parent when any of the child nodes are unchecked. returnAllSelected is set to false by default.



Available Props

Props Type Values

max_width

array
xs
sm
md
lg
xl
0
none

z_index

array
1
2
3
4
5
6
7
8
9
10

number_spacing

array
tabular

shadow

array
none
deep
deeper
deepest

line_height

array
tightest
tighter
tight
normal
loose
looser
loosest

display

array
block
inline_block
inline
flex
inline_flex
none

cursor

array
auto
default
none
contextMenu
help
pointer
progress
wait
cell
crosshair
text
verticalText
alias
copy
move
noDrop
notAllowed
grab
grabbing
eResize
nResize
neResize
nwResize
sResize
seResize
swResize
wResize
ewResize
nsResize
neswResize
nwseResize
colResize
rowResize
allScroll
zoomIn
zoomOut

flex_direction

array
row
column
rowReverse
columnReverse

flex_wrap

array
wrap
nowrap
wrapReverse

justify_content

array
start
end
center
spaceBetween
spaceAround
spaceEvenly

justify_self

array
auto
start
end
center
stretch

align_items

array
flexStart
flexEnd
start
end
center
baseline
stretch

align_content

array
start
end
center
spaceBetween
spaceAround
spaceEvenly

align_self

array
auto
start
end
center
stretch
baseline

flex

array
auto
initial
0
1
2
3
4
5
6
7
8
9
10
11
12
none

flex_grow

array
1
0

flex_shrink

array
1
0

order

array
1
2
3
4
5
6
7
8
9
10
11
12

position

array
relative
absolute
fixed
sticky

margin

array
none
xxs
xs
sm
md
lg
xl

margin_bottom

array
none
xxs
xs
sm
md
lg
xl

margin_left

array
none
xxs
xs
sm
md
lg
xl

margin_right

array
none
xxs
xs
sm
md
lg
xl

margin_top

array
none
xxs
xs
sm
md
lg
xl

margin_x

array
none
xxs
xs
sm
md
lg
xl

margin_y

array
none
xxs
xs
sm
md
lg
xl

padding

array
none
xxs
xs
sm
md
lg
xl

padding_bottom

array
none
xxs
xs
sm
md
lg
xl

padding_left

array
none
xxs
xs
sm
md
lg
xl

padding_right

array
none
xxs
xs
sm
md
lg
xl

padding_top

array
none
xxs
xs
sm
md
lg
xl

padding_x

array
none
xxs
xs
sm
md
lg
xl

padding_y

array
none
xxs
xs
sm
md
lg
xl

classname

string

dark

boolean

id

string

data

hash

aria

hash

children

proc
Props Type Values Default

tree_data

array

return_all_selected

boolean
false