feat(select): handle multiple selections

components/select/__tests__/__snapshots__/index.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Select should render correctly 1`] = `
-"<div><div class=\\"select \\"><span class=\\"value placeholder\\"></span><div class=\\"icon\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.25em\\" height=\\"1.25em\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\"><path d=\\"M6 9l6 6 6-6\\"></path><style>
+"<div><div class=\\"select  \\"><span class=\\"value placeholder\\"></span><div class=\\"icon\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.25em\\" height=\\"1.25em\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\"><path d=\\"M6 9l6 6 6-6\\"></path><style>
         svg {
           color: inherit;
           stroke: currentColor;
@@ -27,6 +27,13 @@ exports[`Select should render correctly 1`] = `
             background-color: #fff;
           }
 
+          .multiple {
+            height: auto;
+            min-height: calc(1.688 * 16pt);
+            padding: 4pt calc(.875rem * 2)
+              4pt 8pt;
+          }
+
           .select:hover {
             border-color: #000;
           }
@@ -74,7 +81,7 @@ exports[`Select should render correctly 1`] = `
             align-items: center;
             color: #666;
           }
-        </style></div><div class=\\"select \\"><span class=\\"value placeholder\\"></span><div class=\\"icon\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.25em\\" height=\\"1.25em\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\"><path d=\\"M6 9l6 6 6-6\\"></path><style>
+        </style></div><div class=\\"select  \\"><span class=\\"value placeholder\\"></span><div class=\\"icon\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.25em\\" height=\\"1.25em\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\"><path d=\\"M6 9l6 6 6-6\\"></path><style>
         svg {
           color: inherit;
           stroke: currentColor;
@@ -100,6 +107,13 @@ exports[`Select should render correctly 1`] = `
             background-color: #fff;
           }
 
+          .multiple {
+            height: auto;
+            min-height: calc(1 * 16pt);
+            padding: 4pt calc(.75rem * 2)
+              4pt 8pt;
+          }
+
           .select:hover {
             border-color: #000;
           }
@@ -147,7 +161,7 @@ exports[`Select should render correctly 1`] = `
             align-items: center;
             color: #666;
           }
-        </style></div><div class=\\"select \\"><span class=\\"value placeholder\\"></span><div class=\\"icon\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.25em\\" height=\\"1.25em\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\"><path d=\\"M6 9l6 6 6-6\\"></path><style>
+        </style></div><div class=\\"select  \\"><span class=\\"value placeholder\\"></span><div class=\\"icon\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.25em\\" height=\\"1.25em\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\"><path d=\\"M6 9l6 6 6-6\\"></path><style>
         svg {
           color: inherit;
           stroke: currentColor;
@@ -173,6 +187,13 @@ exports[`Select should render correctly 1`] = `
             background-color: #fff;
           }
 
+          .multiple {
+            height: auto;
+            min-height: calc(1.344 * 16pt);
+            padding: 4pt calc(.75rem * 2)
+              4pt 8pt;
+          }
+
           .select:hover {
             border-color: #000;
           }
@@ -220,7 +241,7 @@ exports[`Select should render correctly 1`] = `
             align-items: center;
             color: #666;
           }
-        </style></div><div class=\\"select \\"><span class=\\"value placeholder\\"></span><div class=\\"icon\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.25em\\" height=\\"1.25em\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\"><path d=\\"M6 9l6 6 6-6\\"></path><style>
+        </style></div><div class=\\"select  \\"><span class=\\"value placeholder\\"></span><div class=\\"icon\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.25em\\" height=\\"1.25em\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\"><path d=\\"M6 9l6 6 6-6\\"></path><style>
         svg {
           color: inherit;
           stroke: currentColor;
@@ -246,6 +267,13 @@ exports[`Select should render correctly 1`] = `
             background-color: #fff;
           }
 
+          .multiple {
+            height: auto;
+            min-height: calc(2 * 16pt);
+            padding: 4pt calc(1.225rem * 2)
+              4pt 8pt;
+          }
+
           .select:hover {
             border-color: #000;
           }
@@ -296,11 +324,95 @@ exports[`Select should render correctly 1`] = `
         </style></div></div>"
 `;
 
+exports[`Select should work correctly with labels 1`] = `
+"<div class=\\"select  \\"><span class=\\"value placeholder\\"></span><div class=\\"icon\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.25em\\" height=\\"1.25em\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\"><path d=\\"M6 9l6 6 6-6\\"></path><style>
+        svg {
+          color: inherit;
+          stroke: currentColor;
+          transition: all 200ms ease;
+        }
+      </style></svg></div><style>
+          .select {
+            display: inline-flex;
+            align-items: center;
+            user-select: none;
+            white-space: nowrap;
+            position: relative;
+            cursor: pointer;
+            max-width: 80vw;
+            width: initial;
+            overflow: hidden;
+            transition: border 0.2s ease 0s, color 0.2s ease-out 0s, box-shadow 0.2s ease 0s;
+            border: 1px solid #eaeaea;
+            border-radius: 5px;
+            padding: 0 4pt 0 8pt;
+            height: calc(1.688 * 16pt);
+            min-width: 10rem;
+            background-color: #fff;
+          }
+
+          .multiple {
+            height: auto;
+            min-height: calc(1.688 * 16pt);
+            padding: 4pt calc(.875rem * 2)
+              4pt 8pt;
+          }
+
+          .select:hover {
+            border-color: #000;
+          }
+
+          .select:hover .icon {
+            color: #000;
+          }
+
+          .value {
+            display: inline-flex;
+            flex: 1;
+            height: 100%;
+            align-items: center;
+            line-height: 1;
+            padding: 0;
+            margin-right: 1.25rem;
+            font-size: .875rem;
+            color: #000;
+            width: calc(100% - 1.25rem);
+          }
+
+          .value > :global(div),
+          .value > :global(div:hover) {
+            border-radius: 0;
+            background-color: transparent;
+            padding: 0;
+            margin: 0;
+            color: inherit;
+          }
+
+          .placeholder {
+            color: #999;
+          }
+
+          .icon {
+            position: absolute;
+            right: 4pt;
+            font-size: .875rem;
+            top: 50%;
+            bottom: 0;
+            transform: translateY(-50%) rotate(0deg);
+            pointer-events: none;
+            transition: transform 200ms ease;
+            display: flex;
+            align-items: center;
+            color: #666;
+          }
+        </style></div>"
+`;
+
 exports[`Select should work with different icons 1`] = `
 initialize {
   "0": Object {
     "attribs": Object {
-      "class": "select ",
+      "class": "select  ",
     },
     "children": Array [
       Object {
@@ -334,6 +446,13 @@ initialize {
             background-color: #fff;
           }
 
+          .multiple {
+            height: auto;
+            min-height: calc(1.688 * 16pt);
+            padding: 4pt calc(.875rem * 2)
+              4pt 8pt;
+          }
+
           .select:hover {
             border-color: #000;
           }
@@ -431,6 +550,13 @@ initialize {
             background-color: #fff;
           }
 
+          .multiple {
+            height: auto;
+            min-height: calc(1.688 * 16pt);
+            padding: 4pt calc(.875rem * 2)
+              4pt 8pt;
+          }
+
           .select:hover {
             border-color: #000;
           }
@@ -554,7 +680,7 @@ exports[`Select should work with different icons 2`] = `
 initialize {
   "0": Object {
     "attribs": Object {
-      "class": "select ",
+      "class": "select  ",
     },
     "children": Array [
       Object {
@@ -616,6 +742,13 @@ initialize {
             background-color: #fff;
           }
 
+          .multiple {
+            height: auto;
+            min-height: calc(1.688 * 16pt);
+            padding: 4pt calc(.875rem * 2)
+              4pt 8pt;
+          }
+
           .select:hover {
             border-color: #000;
           }
@@ -751,6 +884,13 @@ initialize {
             background-color: #fff;
           }
 
+          .multiple {
+            height: auto;
+            min-height: calc(1.688 * 16pt);
+            padding: 4pt calc(.875rem * 2)
+              4pt 8pt;
+          }
+
           .select:hover {
             border-color: #000;
           }
@@ -865,6 +1005,13 @@ initialize {
             background-color: #fff;
           }
 
+          .multiple {
+            height: auto;
+            min-height: calc(1.688 * 16pt);
+            padding: 4pt calc(.875rem * 2)
+              4pt 8pt;
+          }
+
           .select:hover {
             border-color: #000;
           }

components/select/__tests__/__snapshots__/multiple.test.tsx.snap

@@ -0,0 +1,150 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Select Multiple should render correctly 1`] = `
+"<div class=\\"select multiple \\"><span class=\\"value placeholder\\"></span><div class=\\"item  mock \\"><style>
+        .item {
+        }
+
+        .justify {
+          justify-content: undefined;
+        }
+
+        .direction {
+          flex-direction: undefined;
+        }
+
+        .alignContent {
+          align-content: undefined;
+        }
+
+        .alignItems {
+          align-items: undefined;
+        }
+
+        .xs {
+          flex-grow: 1;
+          max-width: 100%;
+          flex-basis: 0;
+        }
+
+        @media only screen and (max-width: 650px) {
+          .xs {
+            flex-grow: 1;
+            max-width: 100%;
+            flex-basis: 0;
+          }
+        }
+
+        @media only screen and (min-width: 650px) {
+          .sm {
+            flex-grow: 1;
+            max-width: 100%;
+            flex-basis: 0;
+          }
+        }
+
+        @media only screen and (min-width: 900px) {
+          .md {
+            flex-grow: 1;
+            max-width: 100%;
+            flex-basis: 0;
+          }
+        }
+
+        @media only screen and (min-width: 1280px) {
+          .lg {
+            flex-grow: 1;
+            max-width: 100%;
+            flex-basis: 0;
+          }
+        }
+
+        @media only screen and (min-width: 1920px) {
+          .xl {
+            flex-grow: 1;
+            max-width: 100%;
+            flex-basis: 0;
+          }
+        }
+      </style></div><div class=\\"icon\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.25em\\" height=\\"1.25em\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\"><path d=\\"M6 9l6 6 6-6\\"></path><style>
+        svg {
+          color: inherit;
+          stroke: currentColor;
+          transition: all 200ms ease;
+        }
+      </style></svg></div><style>
+          .select {
+            display: inline-flex;
+            align-items: center;
+            user-select: none;
+            white-space: nowrap;
+            position: relative;
+            cursor: pointer;
+            max-width: 80vw;
+            width: initial;
+            overflow: hidden;
+            transition: border 0.2s ease 0s, color 0.2s ease-out 0s, box-shadow 0.2s ease 0s;
+            border: 1px solid #eaeaea;
+            border-radius: 5px;
+            padding: 0 4pt 0 8pt;
+            height: calc(1.688 * 16pt);
+            min-width: 10rem;
+            background-color: #fff;
+          }
+
+          .multiple {
+            height: auto;
+            min-height: calc(1.688 * 16pt);
+            padding: 4pt calc(.875rem * 2)
+              4pt 8pt;
+          }
+
+          .select:hover {
+            border-color: #000;
+          }
+
+          .select:hover .icon {
+            color: #000;
+          }
+
+          .value {
+            display: inline-flex;
+            flex: 1;
+            height: 100%;
+            align-items: center;
+            line-height: 1;
+            padding: 0;
+            margin-right: 1.25rem;
+            font-size: .875rem;
+            color: #000;
+            width: calc(100% - 1.25rem);
+          }
+
+          .value > :global(div),
+          .value > :global(div:hover) {
+            border-radius: 0;
+            background-color: transparent;
+            padding: 0;
+            margin: 0;
+            color: inherit;
+          }
+
+          .placeholder {
+            color: #999;
+          }
+
+          .icon {
+            position: absolute;
+            right: 4pt;
+            font-size: .875rem;
+            top: 50%;
+            bottom: 0;
+            transform: translateY(-50%) rotate(0deg);
+            pointer-events: none;
+            transition: transform 200ms ease;
+            display: flex;
+            align-items: center;
+            color: #666;
+          }
+        </style></div>"
+`;

components/select/__tests__/index.test.tsx

@@ -17,6 +17,19 @@ describe('Select', () => {
     expect(() => wrapper.unmount()).not.toThrow()
   })
 
+  it('should work correctly with labels', () => {
+    const wrapper = mount(
+      <Select>
+        <Select.Option label>1</Select.Option>
+        <Select.Option divider>1</Select.Option>
+        <Select.Option value="1">1</Select.Option>
+        <Select.Option value="2">Option 2</Select.Option>
+      </Select>,
+    )
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+
   it('should work with different icons', () => {
     const MockIcon = () => <span>icon</span>
     const pure = render(<Select pure />)

components/select/__tests__/multiple.test.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import { Select } from 'components'
+import { nativeEvent, updateWrapper } from 'tests/utils'
+
+describe('Select Multiple', () => {
+  it('should render correctly', () => {
+    const wrapper = mount(
+      <Select multiple>
+        <Select.Option value="1">1</Select.Option>
+        <Select.Option value="2">Option 2</Select.Option>
+      </Select>,
+    )
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+
+  it('should render value with initial-value', () => {
+    const wrapper = mount(
+      <Select initialValue={['1', '2']} multiple>
+        <Select.Option value="1">test-1</Select.Option>
+        <Select.Option value="2">test-2</Select.Option>
+        <Select.Option value="3">test-3</Select.Option>
+      </Select>,
+    )
+    expect(wrapper.find('.option').length).toBeGreaterThan(1)
+    const text = wrapper.find('.option').map(item => item.text())
+    expect(text.includes('test-1')).toBeTruthy()
+    expect(text.includes('test-2')).toBeTruthy()
+    expect(text.includes('test-3')).not.toBeTruthy()
+  })
+
+  it('should trigger events when option changed', async () => {
+    let value = ''
+    const changeHandler = jest.fn().mockImplementation(val => (value = val))
+    const wrapper = mount(
+      <Select onChange={changeHandler} multiple>
+        <Select.Option value="1">1</Select.Option>
+        <Select.Option value="2">Option 2</Select.Option>
+      </Select>,
+    )
+    wrapper.find('.select').simulate('click', nativeEvent)
+    wrapper.find('.select-dropdown').find('.option').at(0).simulate('click', nativeEvent)
+    await updateWrapper(wrapper, 350)
+    expect(changeHandler).toHaveBeenCalled()
+    expect(Array.isArray(value)).toBeTruthy()
+    expect(value.includes('1')).toBeTruthy()
+
+    wrapper.find('.select-dropdown').find('.option').at(0).simulate('click', nativeEvent)
+    await updateWrapper(wrapper, 350)
+    expect(Array.isArray(value)).toBeTruthy()
+    expect(value.includes('1')).not.toBeTruthy()
+    changeHandler.mockRestore()
+  })
+})

components/select/select-context.ts

@@ -2,7 +2,7 @@ import React, { MutableRefObject } from 'react'
 import { NormalSizes } from '../utils/prop-types'
 
 export interface SelectConfig {
-  value?: string
+  value?: string | string[]
   updateValue?: Function
   visible?: boolean
   updateVisible?: Function

components/select/select-multiple-value.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import useTheme from '../styles/use-theme'
+import Grid from '../grid'
+
+interface Props {
+  disabled: boolean
+  size: string
+}
+
+const SelectMultipleValue: React.FC<React.PropsWithChildren<Props>> = ({
+  disabled,
+  size,
+  children,
+}) => {
+  const theme = useTheme()
+
+  return (
+    <Grid>
+      <div className="item">{children}</div>
+      <style jsx>{`
+        .item {
+          display: inline-flex;
+          height: calc(${size} * 2);
+          align-items: center;
+          line-height: 1;
+          padding: 0 0.5rem;
+          font-size: ${size};
+          border-radius: ${theme.layout.radius};
+          background-color: ${theme.palette.accents_2};
+          color: ${disabled ? theme.palette.accents_4 : theme.palette.accents_6};
+        }
+
+        .item > :global(div),
+        .item > :global(div:hover) {
+          border-radius: 0;
+          background-color: transparent;
+          padding: 0;
+          margin: 0;
+          color: inherit;
+        }
+      `}</style>
+    </Grid>
+  )
+}
+
+export default SelectMultipleValue

components/select/select-option.tsx

@@ -5,14 +5,18 @@ import { useSelectContext } from './select-context'
 import useWarning from '../utils/use-warning'
 
 interface Props {
-  value: string
+  value?: string
   disabled?: boolean
   className?: string
+  divider?: boolean
+  label?: boolean
   preventAllEvents?: boolean
 }
 
 const defaultProps = {
   disabled: false,
+  divider: false,
+  label: false,
   className: '',
   preventAllEvents: false,
 }
@@ -25,23 +29,37 @@ const SelectOption: React.FC<React.PropsWithChildren<SelectOptionProps>> = ({
   className,
   children,
   disabled,
+  divider,
+  label,
   preventAllEvents,
   ...props
 }) => {
   const theme = useTheme()
   const { updateValue, value, disableAll } = useSelectContext()
   const isDisabled = useMemo(() => disabled || disableAll, [disabled, disableAll])
-  if (identValue === undefined) {
+  const isLabel = useMemo(() => label || divider, [label, divider])
+  if (!isLabel && identValue === undefined) {
     useWarning('The props "value" is required.', 'Select Option')
   }
 
-  const selected = useMemo(() => (value ? identValue === value : false), [identValue, value])
+  const selected = useMemo(() => {
+    if (!value) return false
+    if (typeof value === 'string') {
+      return identValue === value
+    }
+    return value.includes(`${identValue}`)
+  }, [identValue, value])
 
   const bgColor = useMemo(() => {
     if (isDisabled) return theme.palette.accents_1
-    return selected ? theme.palette.accents_1 : theme.palette.background
+    return selected ? theme.palette.accents_2 : theme.palette.background
   }, [selected, isDisabled, theme.palette])
 
+  const hoverBgColor = useMemo(() => {
+    if (isDisabled || isLabel || selected) return bgColor
+    return theme.palette.accents_1
+  }, [selected, isDisabled, theme.palette, isLabel, bgColor])
+
   const color = useMemo(() => {
     if (isDisabled) return theme.palette.accents_4
     return selected ? theme.palette.foreground : theme.palette.accents_5
@@ -52,13 +70,16 @@ const SelectOption: React.FC<React.PropsWithChildren<SelectOptionProps>> = ({
     event.stopPropagation()
     event.nativeEvent.stopImmediatePropagation()
     event.preventDefault()
-    if (isDisabled) return
+    if (isDisabled || isLabel) return
     updateValue && updateValue(identValue)
   }
 
   return (
     <>
-      <div className={`option ${className}`} onClick={clickHandler} {...props}>
+      <div
+        className={`option ${divider ? 'divider' : ''} ${label ? 'label' : ''} ${className}`}
+        onClick={clickHandler}
+        {...props}>
         {children}
       </div>
 
@@ -80,18 +101,27 @@ const SelectOption: React.FC<React.PropsWithChildren<SelectOptionProps>> = ({
           transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
         }
 
-        .option:first-of-type {
-          border-top-left-radius: ${theme.layout.radius};
-          border-top-right-radius: ${theme.layout.radius};
-        }
-
-        .option:last-of-type {
-          border-bottom-left-radius: ${theme.layout.radius};
-          border-bottom-right-radius: ${theme.layout.radius};
-        }
-
         .option:hover {
-          background-color: ${theme.palette.accents_1};
+          background-color: ${hoverBgColor};
+          color: ${theme.palette.accents_7};
+        }
+
+        .divider {
+          line-height: 0;
+          height: 0;
+          padding: 0;
+          overflow: hidden;
+          border-top: 1px solid ${theme.palette.border};
+          margin: 0.5rem 0;
+          width: 100%;
+        }
+
+        .label {
+          font-size: 0.875rem;
+          color: ${theme.palette.accents_7};
+          border-bottom: 1px solid ${theme.palette.border};
+          text-transform: capitalize;
+          cursor: default;
         }
       `}</style>
     </>

components/select/select.tsx

@@ -1,24 +1,29 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { NormalSizes } from '../utils/prop-types'
+import useTheme from '../styles/use-theme'
 import useClickAway from '../utils/use-click-away'
-import { pickChildByProps, pickChildrenFirst } from '../utils/collections'
+import useCurrentState from '../utils/use-current-state'
+import { pickChildByProps } from '../utils/collections'
 import SelectIcon from './select-icon'
 import SelectOption from './select-option'
-import useTheme from '../styles/use-theme'
 import SelectDropdown from './select-dropdown'
+import SelectMultipleValue from './select-multiple-value'
+import Grid from '../grid'
 import { SelectContext, SelectConfig } from './select-context'
 import { getSizes } from './styles'
 
 interface Props {
   disabled?: boolean
   size?: NormalSizes
-  value?: string
-  initialValue?: string
+  value?: string | string[]
+  initialValue?: string | string[]
   placeholder?: React.ReactNode | string
   icon?: React.ComponentType
-  onChange?: (value: string) => void
+  onChange?: (value: string | string[]) => void
   pure?: boolean
+  multiple?: boolean
   className?: string
+  width?: string
   dropdownClassName?: string
   dropdownStyle?: object
 }
@@ -28,6 +33,8 @@ const defaultProps = {
   size: 'medium' as NormalSizes,
   icon: SelectIcon as React.ComponentType,
   pure: false,
+  multiple: false,
+  width: 'initial',
   className: '',
 }
 
@@ -42,9 +49,11 @@ const Select: React.FC<React.PropsWithChildren<SelectProps>> = ({
   value: customValue,
   icon: Icon,
   onChange,
-  className,
   pure,
+  multiple,
   placeholder,
+  width,
+  className,
   dropdownClassName,
   dropdownStyle,
   ...props
@@ -52,14 +61,28 @@ const Select: React.FC<React.PropsWithChildren<SelectProps>> = ({
   const theme = useTheme()
   const ref = useRef<HTMLDivElement>(null)
   const [visible, setVisible] = useState<boolean>(false)
-  const [value, setValue] = useState<string | undefined>(init)
+  const [value, setValue, valueRef] = useCurrentState<string | string[] | undefined>(() => {
+    if (!multiple) return init
+    if (Array.isArray(init)) return init
+    return typeof init === 'undefined' ? [] : [init]
+  })
+  const isEmpty = useMemo(() => {
+    if (!Array.isArray(value)) return !value
+    return value.length === 0
+  }, [value])
   const sizes = useMemo(() => getSizes(theme, size), [theme, size])
 
   const updateVisible = (next: boolean) => setVisible(next)
   const updateValue = (next: string) => {
-    setValue(next)
-    onChange && onChange(next)
-    setVisible(false)
+    setValue(last => {
+      if (!Array.isArray(last)) return next
+      if (!last.includes(next)) return [...last, next]
+      return last.filter(item => item !== next)
+    })
+    onChange && onChange(valueRef.current as string | string[])
+    if (!multiple) {
+      setVisible(false)
+    }
   }
 
   const initialValue: SelectConfig = useMemo(
@@ -72,7 +95,7 @@ const Select: React.FC<React.PropsWithChildren<SelectProps>> = ({
       ref,
       disableAll: disabled,
     }),
-    [visible, size, disabled, ref],
+    [visible, size, disabled, ref, value, multiple],
   )
 
   const clickHandler = (event: React.MouseEvent<HTMLDivElement>) => {
@@ -84,7 +107,6 @@ const Select: React.FC<React.PropsWithChildren<SelectProps>> = ({
   }
 
   useClickAway(ref, () => setVisible(false))
-
   useEffect(() => {
     if (customValue === undefined) return
     setValue(customValue)
@@ -92,16 +114,28 @@ const Select: React.FC<React.PropsWithChildren<SelectProps>> = ({
 
   const selectedChild = useMemo(() => {
     const [, optionChildren] = pickChildByProps(children, 'value', value)
-    const child = pickChildrenFirst(optionChildren)
-    if (!React.isValidElement(child)) return optionChildren
-    return React.cloneElement(child, { preventAllEvents: true })
-  }, [value, children])
+    return React.Children.map(optionChildren, child => {
+      if (!React.isValidElement(child)) return null
+      const el = React.cloneElement(child, { preventAllEvents: true })
+      if (!multiple) return el
+      return (
+        <SelectMultipleValue size={sizes.fontSize} disabled={disabled}>
+          {el}
+        </SelectMultipleValue>
+      )
+    })
+  }, [value, children, multiple])
 
   return (
     <SelectContext.Provider value={initialValue}>
-      <div className={`select ${className}`} ref={ref} onClick={clickHandler} {...props}>
-        {!value && <span className="value placeholder">{placeholder}</span>}
-        {value && <span className="value">{selectedChild}</span>}
+      <div
+        className={`select ${multiple ? 'multiple' : ''} ${className}`}
+        ref={ref}
+        onClick={clickHandler}
+        {...props}>
+        {isEmpty && <span className="value placeholder">{placeholder}</span>}
+        {value && !multiple && <span className="value">{selectedChild}</span>}
+        {value && multiple && <Grid.Container gap={0.5}>{selectedChild}</Grid.Container>}
         <SelectDropdown
           visible={visible}
           className={dropdownClassName}
@@ -122,7 +156,7 @@ const Select: React.FC<React.PropsWithChildren<SelectProps>> = ({
             position: relative;
             cursor: ${disabled ? 'not-allowed' : 'pointer'};
             max-width: 80vw;
-            width: initial;
+            width: ${width};
             overflow: hidden;
             transition: border 0.2s ease 0s, color 0.2s ease-out 0s, box-shadow 0.2s ease 0s;
             border: 1px solid ${theme.palette.border};
@@ -133,6 +167,13 @@ const Select: React.FC<React.PropsWithChildren<SelectProps>> = ({
             background-color: ${disabled ? theme.palette.accents_1 : theme.palette.background};
           }
 
+          .multiple {
+            height: auto;
+            min-height: ${sizes.height};
+            padding: ${theme.layout.gapQuarter} calc(${sizes.fontSize} * 2)
+              ${theme.layout.gapQuarter} ${theme.layout.gapHalf};
+          }
+
           .select:hover {
             border-color: ${disabled ? theme.palette.border : theme.palette.foreground};
           }