Options
Name | Type | Required |
---|---|---|
name | string | |
label | string | |
helperText | string | |
description | string | |
isDisabled | boolean | |
isReadOnly | boolean |
This a custom component with a custom design.
Dual list select is wrapped in a form group, so it accepts all form group props.
Props | Type | Default | Description |
---|---|---|---|
options | array | [] | [{label, value, ...props}] see below |
leftTitle | String | 'Options' | Title for options |
rightTitle | String | 'Selected' | Title for selected items |
moveLeftTitle | String | 'Move selected to left' | Tooltip for move to left button |
moveRightTitle | String | 'Move selected to right' | Tooltip for move to right button |
moveAllLeftTitle | String | 'Move all to left' | Tooltip for move all to left button |
moveAllRightTitle | String | 'Move all to right' | Tooltip for move all to right button |
allToLeft | Boolean | true | Hides all to left button |
allToRight | Boolean | true | Hides all to right button |
noValueTitle | String | 'No selected' | Placeholder for empty value |
noOptionsTitle | String | 'No available options' | Placeholder for empty options |
filterOptionsTitle | String | 'Filter options' | Placeholder for options filter input |
filterValueTitle | String | 'Filter selected value' | Placeholder for value filter input |
filterValueText | String | 'Remove your filter to see all selected' | Placeholder for value when there is no filtered value |
filterOptionsText | String | 'Remove your filter to see all options' | Placeholder for options when there is no filtered option |
checkboxVariant | bool | false | Change list item to checkboxes |
isFilterable | bool | true | Shows toolbar for both lists |
Props | Type | Description |
---|---|---|
value | string | Value of the option |
label | node | ListItemText primary text |
icon | element | Icon for the ListItemIcon |
isCheckbox | bool | Checkbox variant |
secondaryActions | element | Children of secondaryActions component |
ListItemProps | object | Props passed to ListItem |
ListItemIconProps | object | Props passed to ListItemIcon |
ListItemTextProps | object | Props passed to ListItemText |
ListItemSecondaryActionProps | object | Props passed to ListItemSecondaryAction |
MUI DualListSelect provides fully customization. When the props offers Right/Left variant, you can pass props to RightXXX
or to LeftXXX
props. Example: ListGridProps
is Right/Left, so there are two more props: RightListGridProps
and LeftListGridProps
. These props overrides the standard props, except className
, that are being combined. All these props are objects.
Props | Right/Left variant |
---|---|
FormFieldGridProps | |
InternalGridProps | |
ListGridProps | yes |
ListProps | yes |
ButtonsGridProps | |
ButtonsInternalGridProps | |
ButtonGridProps | |
ToRightGridProps | |
IconButtonProps | |
ToRightIconButtonProps | |
AllToLeftIconProps | |
AllToRightGridProps | |
AllToRightIconButtonProps | |
AllToLeftGridProps | |
AllToLeftIconButtonProps | |
ToLeftGridProps | |
ToLeftIconButtonProps | |
ListItemProps | yes |
ListItemIconProps | yes |
ListItemTextProps | yes |
ListItemSecondaryActionProps | yes |
FormControlProps | |
FormLabelProps | |
FormHelperTextProps | |
TitleProps | yes |
ToolbarProps | yes |
FilterFieldProps | yes |
SortIconButtonProps | yes |
SortIconProps | yes |
PaperProps | yes |