Skip to main content

Material UI

This example shows one way to define a Material UI-flavored wrapper around SuperSelect.

export function MaterialSuperSelect(props) {
    return (
        <SuperSelect
            {...props}
            customization={{
                classNamePrefix: "mui-super-select",
                modalSelectButton: {
                    component: MaterialSelectButton,
                    selectedContent: {
                        component: MaterialSelectedContent,
                    },
                },
                modal: {
                    component: MaterialModalDialog,
                    okButton: {
                        component: MaterialOkButton,
                    },
                },
                optionList: {
                    component: MaterialOptionListContainer,
                },
                optionListInput: {
                    component: MaterialOptionListInput,
                },
                searchInput: {
                    component: MaterialSearchInput,
                    placeholder: "Search options",
                },
                toggleButtonInput: {
                    component: MaterialToggleButtonInput,
                },
                selectInput: {
                    component: MaterialNativeSelect,
                },
            }}
        />
    );
}

See website/src/components/MaterialSuperSelect.tsx for the full source code of this example:

Display Mode

Single Select

Multi Select

Grouped Options

Loading State

Error State

Toolkit Modal + Modal Select