1 files changed, 66 insertions, 0 deletions
diff --git a/packages/website/ts/components/ui/multi_select.tsx b/packages/website/ts/components/ui/multi_select.tsx
new file mode 100644
index 000000000..2cf44cae1
--- /dev/null
+++ b/packages/website/ts/components/ui/multi_select.tsx
@@ -0,0 +1,66 @@
+import { colors } from '@0x/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { Container } from './container';
+
+export interface MultiSelectItemConfig {
+    value: string;
+    renderItemContent: (isSelected: boolean) => React.ReactNode;
+    onClick?: () => void;
+}
+
+export interface MultiSelectProps {
+    selectedValues?: string[];
+    items: MultiSelectItemConfig[];
+    backgroundColor?: string;
+    height?: string;
+}
+
+export class MultiSelect extends React.Component<MultiSelectProps> {
+    public static defaultProps = {
+        backgroundColor: colors.white,
+    };
+    public render(): React.ReactNode {
+        const { items, backgroundColor, selectedValues, height } = this.props;
+        return (
+            <Container
+                backgroundColor={backgroundColor}
+                borderRadius="4px"
+                width="100%"
+                height={height}
+                overflowY="scroll"
+            >
+                {_.map(items, item => (
+                    <MultiSelectItem
+                        key={item.value}
+                        renderItemContent={item.renderItemContent}
+                        backgroundColor={backgroundColor}
+                        onClick={item.onClick}
+                        isSelected={_.isUndefined(selectedValues) || _.includes(selectedValues, item.value)}
+                    />
+                ))}
+            </Container>
+        );
+    }
+}
+
+export interface MultiSelectItemProps {
+    renderItemContent: (isSelected: boolean) => React.ReactNode;
+    isSelected?: boolean;
+    onClick?: () => void;
+    backgroundColor?: string;
+}
+
+export const MultiSelectItem: React.StatelessComponent<MultiSelectItemProps> = ({
+    renderItemContent,
+    isSelected,
+    onClick,
+    backgroundColor,
+}) => (
+    <Container cursor="pointer" shouldDarkenOnHover={true} onClick={onClick} backgroundColor={backgroundColor}>
+        <Container borderBottom={`1px solid ${colors.lightestGrey}`} margin="0px 15px" padding="10px 0px">
+            {renderItemContent(isSelected)}
+        </Container>
+    </Container>
+);