diff --git a/packages/big-design/src/components/Checkbox/Checkbox.tsx b/packages/big-design/src/components/Checkbox/Checkbox.tsx
index 530f44d62..6aeeff239 100644
--- a/packages/big-design/src/components/Checkbox/Checkbox.tsx
+++ b/packages/big-design/src/components/Checkbox/Checkbox.tsx
@@ -77,11 +77,11 @@ class RawCheckbox extends React.PureComponent<CheckboxProps & PrivateProps> {
 
   private renderLabel() {
     const htmlFor = this.getInputId();
-    const { label, theme } = this.props;
+    const { disabled, label, theme } = this.props;
 
     if (typeof label === 'string') {
       return (
-        <StyledLabel htmlFor={htmlFor} id={this.labelUniqueId} theme={theme}>
+        <StyledLabel disabled={disabled} htmlFor={htmlFor} aria-hidden={disabled} id={this.labelUniqueId} theme={theme}>
           {label}
         </StyledLabel>
       );
diff --git a/packages/big-design/src/components/Checkbox/spec.tsx b/packages/big-design/src/components/Checkbox/spec.tsx
index c5dcb619d..cb6c746f1 100644
--- a/packages/big-design/src/components/Checkbox/spec.tsx
+++ b/packages/big-design/src/components/Checkbox/spec.tsx
@@ -113,3 +113,11 @@ test('theme prop overrides default theme', () => {
 
   expect(container.querySelector('label')).toHaveStyle(`background-color: red`);
 });
+
+test('displays text greyed out when disabled', () => {
+  const { container } = render(<Checkbox disabled label="Checked" className="test" />);
+
+  const labels = container.querySelectorAll('label');
+
+  expect(labels[1]).toHaveStyle('color: #B4BAD1');
+});
diff --git a/packages/big-design/src/components/Checkbox/styled.tsx b/packages/big-design/src/components/Checkbox/styled.tsx
index 2f56ce0c9..c5139de84 100644
--- a/packages/big-design/src/components/Checkbox/styled.tsx
+++ b/packages/big-design/src/components/Checkbox/styled.tsx
@@ -1,6 +1,6 @@
 import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import { hideVisually } from 'polished';
-import styled, { DefaultTheme, StyledComponent } from 'styled-components';
+import styled, { css, DefaultTheme, StyledComponent } from 'styled-components';
 
 import { StyleableText } from '../Typography/private';
 
@@ -9,6 +9,10 @@ interface StyledCheckboxProps {
   isIndeterminate?: boolean;
 }
 
+export interface StyledLabelProps {
+  disabled?: boolean;
+}
+
 export const CheckboxContainer = styled.div`
   align-items: center;
   display: flex;
@@ -45,9 +49,15 @@ export const StyledCheckbox = styled.label<StyledCheckboxProps>`
 
 export const StyledLabel = styled(StyleableText).attrs({
   as: 'label',
-})<React.LabelHTMLAttributes<HTMLLabelElement>>`
+})<React.LabelHTMLAttributes<HTMLLabelElement> & StyledLabelProps>`
   margin-left: ${({ theme }) => theme.spacing.medium};
-` as StyledComponent<'label', DefaultTheme>;
+
+  ${({ disabled, theme }) =>
+    disabled &&
+    css`
+      color: ${theme.colors.secondary40};
+    `}
+` as StyledComponent<'label', DefaultTheme, StyledLabelProps>;
 
 StyledCheckbox.defaultProps = { theme: defaultTheme };
 StyledLabel.defaultProps = { theme: defaultTheme };
diff --git a/packages/big-design/src/components/Chip/Chip.tsx b/packages/big-design/src/components/Chip/Chip.tsx
index 644c8f5d8..0e5b4e75e 100644
--- a/packages/big-design/src/components/Chip/Chip.tsx
+++ b/packages/big-design/src/components/Chip/Chip.tsx
@@ -2,17 +2,19 @@ import { CloseIcon } from '@bigcommerce/big-design-icons';
 import { ThemeInterface } from '@bigcommerce/big-design-theme';
 import React, { memo } from 'react';
 
+import { MarginProps } from '../../mixins';
 import { Text } from '../Typography';
 
 import { StyledChip, StyledCloseButton } from './styled';
 
-export interface ChipProps {
+export interface ChipProps extends MarginProps {
   theme?: ThemeInterface;
   onDelete?(): void;
 }
 
-export const Chip: React.FC<ChipProps> = memo(({ children, onDelete, theme }) => {
+export const Chip: React.FC<ChipProps> = memo(({ children, onDelete, theme, ...rest }) => {
   const label = typeof children === 'string' ? children : null;
+  const ariaLabel = label ? { 'aria-label': `Remove ${label}` } : {};
 
   const handleOnDelete = (event: React.SyntheticEvent<HTMLButtonElement, MouseEvent>) => {
     event.preventDefault();
@@ -25,6 +27,7 @@ export const Chip: React.FC<ChipProps> = memo(({ children, onDelete, theme }) =>
   const renderDeleteButton = () =>
     onDelete && (
       <StyledCloseButton
+        {...ariaLabel}
         variant="subtle"
         onClick={handleOnDelete}
         iconOnly={<CloseIcon size="medium" title="Delete" theme={theme} />}
@@ -40,6 +43,7 @@ export const Chip: React.FC<ChipProps> = memo(({ children, onDelete, theme }) =>
       margin="xxSmall"
       borderRadius="normal"
       theme={theme}
+      {...rest}
     >
       <Text margin="none" marginRight="xxSmall" theme={theme}>
         {label}
diff --git a/packages/big-design/src/components/Chip/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Chip/__snapshots__/spec.tsx.snap
index 3d781823b..a13795167 100644
--- a/packages/big-design/src/components/Chip/__snapshots__/spec.tsx.snap
+++ b/packages/big-design/src/components/Chip/__snapshots__/spec.tsx.snap
@@ -165,6 +165,7 @@ exports[`renders with close button if onRemove is present 1`] = `
     Test
   </p>
   <button
+    aria-label="Remove Test"
     class="c3 c4"
     role="button"
     tabindex="0"
diff --git a/packages/big-design/src/components/Dropdown/Dropdown.tsx b/packages/big-design/src/components/Dropdown/Dropdown.tsx
index ba6acf96f..1948cf2a7 100644
--- a/packages/big-design/src/components/Dropdown/Dropdown.tsx
+++ b/packages/big-design/src/components/Dropdown/Dropdown.tsx
@@ -1,5 +1,5 @@
 import { Placement } from 'popper.js';
-import React, { AllHTMLAttributes, RefObject } from 'react';
+import React, { RefObject } from 'react';
 import { Manager, Reference, RefHandler } from 'react-popper';
 import scrollIntoView from 'scroll-into-view-if-needed';
 
@@ -16,7 +16,7 @@ interface Props {
   maxHeight?: number;
   placement?: Placement;
   trigger: React.ReactElement;
-  onItemClick?(value: AllHTMLAttributes<HTMLElement>['value']): void;
+  onItemClick?(value: string | number | Array<string | number>): void;
 }
 
 export type DropdownProps = Props & React.HTMLAttributes<HTMLUListElement>;
@@ -56,7 +56,7 @@ export class Dropdown extends React.PureComponent<DropdownProps, DropdownState>
           maxHeight={maxHeight}
           onKeyDown={this.handleOnDropdownKeyDown}
           placement={placement}
-          role="menu"
+          role="listbox"
           {...aria}
           {...rest}
         >
@@ -80,7 +80,10 @@ export class Dropdown extends React.PureComponent<DropdownProps, DropdownState>
       switch (child.type) {
         case ListItem:
           const id = this.getItemId(child, index);
-          this.listItemsRefs.push(ref);
+
+          if (!child.props.disabled) {
+            this.listItemsRefs.push(ref);
+          }
 
           return React.cloneElement(child, {
             'data-highlighted': highlightedItem && id === highlightedItem.id,
@@ -89,7 +92,7 @@ export class Dropdown extends React.PureComponent<DropdownProps, DropdownState>
             onFocus: this.handleOnItemFocus,
             onMouseOver: this.handleOnItemMouseOver,
             ref,
-            role: 'menuitem',
+            role: 'option',
           }) as React.LiHTMLAttributes<HTMLLIElement>;
         default:
           return;
@@ -100,7 +103,7 @@ export class Dropdown extends React.PureComponent<DropdownProps, DropdownState>
   private renderTrigger(ref: RefHandler) {
     const { trigger } = this.props;
 
-    const aria = this.state.isOpen ? { 'aria-expanded': true, 'aria-owns': this.getDropdownId() } : {};
+    const aria = this.state.isOpen ? { 'aria-expanded': true } : {};
 
     return (
       React.isValidElement(trigger) &&
diff --git a/packages/big-design/src/components/Dropdown/spec.tsx b/packages/big-design/src/components/Dropdown/spec.tsx
index ccedaa789..75f984ede 100644
--- a/packages/big-design/src/components/Dropdown/spec.tsx
+++ b/packages/big-design/src/components/Dropdown/spec.tsx
@@ -36,20 +36,19 @@ test('dropdown trigger has aria-haspopup', () => {
   expect(trigger.getAttribute('aria-haspopup')).toBe('true');
 });
 
-test('dropdown trigger has aria-expanded and aria-owns when dropdown menu is open', () => {
+test('dropdown trigger has aria-expanded when dropdown menu is open', () => {
   const { getByRole } = render(DropdownMock);
   const trigger = getByRole('button');
 
   fireEvent.click(trigger);
 
   expect(trigger.getAttribute('aria-expanded')).toBe('true');
-  expect(trigger.getAttribute('aria-owns')).toBe(getByRole('menu').id);
 });
 
 test('renders the dropdown menu closed', () => {
   const { queryByRole } = render(DropdownMock);
 
-  expect(queryByRole('menu')).not.toBeVisible();
+  expect(queryByRole('listbox')).not.toBeVisible();
 });
 
 test('opens/closes dropdown menu when trigger is clicked', () => {
@@ -57,10 +56,10 @@ test('opens/closes dropdown menu when trigger is clicked', () => {
   const trigger = getByRole('button');
 
   fireEvent.click(trigger);
-  expect(queryByRole('menu')).not.toHaveStyle('height: 1px');
+  expect(queryByRole('listbox')).not.toHaveStyle('height: 1px');
 
   fireEvent.click(trigger);
-  expect(queryByRole('menu')).toHaveStyle('height: 1px');
+  expect(queryByRole('listbox')).toHaveStyle('height: 1px');
 });
 
 test('dropdown menu has aria-labelledby', () => {
@@ -69,7 +68,7 @@ test('dropdown menu has aria-labelledby', () => {
 
   fireEvent.click(trigger);
 
-  expect(getByRole('menu').getAttribute('aria-labelledby')).toBe(trigger.id);
+  expect(getByRole('listbox').getAttribute('aria-labelledby')).toBe(trigger.id);
 });
 
 test('dropdown menu has aria-activedescendant', () => {
@@ -78,22 +77,22 @@ test('dropdown menu has aria-activedescendant', () => {
 
   fireEvent.click(trigger);
 
-  const options = getAllByRole('menuitem');
+  const options = getAllByRole('option');
 
-  expect(getByRole('menu').getAttribute('aria-activedescendant')).toBe(options[0].id);
+  expect(getByRole('listbox').getAttribute('aria-activedescendant')).toBe(options[0].id);
 });
 
 test('dropdown menu should have 4 dropdown items', () => {
   const { getAllByRole } = render(DropdownMock);
 
-  const options = getAllByRole('menuitem');
+  const options = getAllByRole('option');
   expect(options.length).toBe(4);
 });
 
 test('dropdown items should have values', () => {
   const { getAllByRole } = render(DropdownMock);
 
-  const options = getAllByRole('menuitem');
+  const options = getAllByRole('option');
   options.forEach((option, index) => expect(option.getAttribute('data-value')).toBe(`${index}`));
 });
 
@@ -103,7 +102,7 @@ test('first dropdown item should be selected when dropdown is opened', () => {
 
   fireEvent.click(trigger);
 
-  const option = getAllByRole('menuitem')[0];
+  const option = getAllByRole('option')[0];
 
   expect(option.dataset.highlighted).toBe('true');
 });
@@ -114,8 +113,8 @@ test('up/down arrows should change dropdown item selection', () => {
 
   fireEvent.click(trigger);
 
-  const menu = getByRole('menu');
-  const options = getAllByRole('menuitem');
+  const menu = getByRole('listbox');
+  const options = getAllByRole('option');
 
   fireEvent.keyDown(menu, { key: 'ArrowDown' });
   expect(options[1].dataset.highlighted).toBe('true');
@@ -132,10 +131,10 @@ test('esc should close menu', () => {
   const trigger = getByRole('button');
 
   fireEvent.click(trigger);
-  expect(queryByRole('menu')).not.toHaveStyle('height: 1px');
+  expect(queryByRole('listbox')).not.toHaveStyle('height: 1px');
 
-  fireEvent.keyDown(getByRole('menu'), { key: 'Escape' });
-  expect(queryByRole('menu')).toHaveStyle('height: 1px');
+  fireEvent.keyDown(getByRole('listbox'), { key: 'Escape' });
+  expect(queryByRole('listbox')).toHaveStyle('height: 1px');
 });
 
 test('tab should close menu', () => {
@@ -143,10 +142,10 @@ test('tab should close menu', () => {
   const trigger = getByRole('button');
 
   fireEvent.click(trigger);
-  expect(queryByRole('menu')).not.toHaveStyle('height: 1px');
+  expect(queryByRole('listbox')).not.toHaveStyle('height: 1px');
 
-  fireEvent.keyDown(getByRole('menu'), { key: 'Tab' });
-  expect(queryByRole('menu')).toHaveStyle('height: 1px');
+  fireEvent.keyDown(getByRole('listbox'), { key: 'Tab' });
+  expect(queryByRole('listbox')).toHaveStyle('height: 1px');
 });
 
 test('home should select first dropdown item', () => {
@@ -155,8 +154,8 @@ test('home should select first dropdown item', () => {
 
   fireEvent.click(trigger);
 
-  const menu = getByRole('menu');
-  const options = getAllByRole('menuitem');
+  const menu = getByRole('listbox');
+  const options = getAllByRole('option');
 
   fireEvent.keyDown(menu, { key: 'ArrowDown' });
   fireEvent.keyDown(menu, { key: 'ArrowDown' });
@@ -174,8 +173,8 @@ test('end should select last dropdown item', () => {
 
   fireEvent.click(trigger);
 
-  const menu = getByRole('menu');
-  const options = getAllByRole('menuitem');
+  const menu = getByRole('listbox');
+  const options = getAllByRole('option');
 
   expect(options[0].dataset.highlighted).toBe('true');
 
@@ -196,8 +195,8 @@ test('enter should trigger onItemClick', () => {
 
   fireEvent.click(trigger);
 
-  const menu = getByRole('menu');
-  const options = getAllByRole('menuitem');
+  const menu = getByRole('listbox');
+  const options = getAllByRole('option');
 
   fireEvent.keyDown(menu, { key: 'ArrowDown' });
   expect(options[1].dataset.highlighted).toBe('true');
@@ -218,8 +217,8 @@ test('space should trigger onItemClick', () => {
 
   fireEvent.click(trigger);
 
-  const menu = getByRole('menu');
-  const options = getAllByRole('menuitem');
+  const menu = getByRole('listbox');
+  const options = getAllByRole('option');
 
   fireEvent.keyDown(menu, { key: 'ArrowDown' });
   expect(options[1].dataset.highlighted).toBe('true');
@@ -240,7 +239,7 @@ test('clicking on dropdown items should trigger onItemClick', () => {
 
   fireEvent.click(trigger);
 
-  const options = getAllByRole('menuitem');
+  const options = getAllByRole('option');
 
   fireEvent.mouseOver(options[1]);
   fireEvent.click(options[1]);
@@ -253,7 +252,7 @@ test('dropdown items should be highlighted when moused over', () => {
 
   fireEvent.click(trigger);
 
-  const option = getAllByRole('menuitem')[0];
+  const option = getAllByRole('option')[0];
 
   fireEvent.mouseOver(option);
   expect(option.dataset.highlighted).toBe('true');
diff --git a/packages/big-design/src/components/Form/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Form/__snapshots__/spec.tsx.snap
index f83f9bf4d..25b64b920 100644
--- a/packages/big-design/src/components/Form/__snapshots__/spec.tsx.snap
+++ b/packages/big-design/src/components/Form/__snapshots__/spec.tsx.snap
@@ -57,62 +57,84 @@ exports[`simple form render 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  background-color: #FFFFFF;
+  border-radius: 0.25rem;
+  box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  position: relative;
-}
-
-.c8 {
-  background-color: #FFFFFF;
-  border-radius: 0.25rem;
-  box-sizing: border-box;
-  color: #313440;
-  height: 2.25rem;
-  line-height: 1.5rem;
+  min-height: 2.25rem;
   padding: 0.25rem 0.75rem;
   width: 100%;
   border: 1px solid #D9DCE9;
 }
 
-.c8:hover:not([disabled]) {
+.c7:hover:not([disabled]) {
   border: 1px solid #B4BAD1;
 }
 
-.c8:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px #DBE3FE;
+.c7[disabled] {
+  background-color: #ECEEF5;
 }
 
-.c8[disabled] {
-  background-color: #ECEEF5;
+.c9 {
+  border: 0;
+  box-sizing: border-box;
+  color: #313440;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  height: 1.5rem;
+  margin-top: 0.25rem;
+  padding: 0;
+  width: 100%;
 }
 
-.c8::-webkit-input-placeholder {
+.c9:focus {
+  outline: none;
+}
+
+.c9::-webkit-input-placeholder {
   color: #B4BAD1;
-  line-height: 1.5rem;
   font-size: 1rem;
 }
 
-.c8::-moz-placeholder {
+.c9::-moz-placeholder {
   color: #B4BAD1;
-  line-height: 1.5rem;
   font-size: 1rem;
 }
 
-.c8:-ms-input-placeholder {
+.c9:-ms-input-placeholder {
   color: #B4BAD1;
-  line-height: 1.5rem;
   font-size: 1rem;
 }
 
-.c8::placeholder {
+.c9::placeholder {
   color: #B4BAD1;
-  line-height: 1.5rem;
   font-size: 1rem;
 }
 
+.c9[disabled] {
+  background-color: #ECEEF5;
+}
+
+.c8 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  height: 100%;
+  margin-top: -0.25rem;
+}
+
 .c3 {
   display: grid;
   grid-gap: 0.5rem 1rem;
@@ -175,11 +197,15 @@ exports[`simple form render 1`] = `
         <span
           class="c6 c7"
         >
-          <input
+          <div
             class="c8"
-            id="input_0"
-            placeholder="Placeholder text"
-          />
+          >
+            <input
+              class="c9"
+              id="input_0"
+              placeholder="Placeholder text"
+            />
+          </div>
         </span>
       </div>
     </div>
@@ -201,11 +227,15 @@ exports[`simple form render 1`] = `
         <span
           class="c6 c7"
         >
-          <input
+          <div
             class="c8"
-            id="input_1"
-            placeholder="Placeholder text"
-          />
+          >
+            <input
+              class="c9"
+              id="input_1"
+              placeholder="Placeholder text"
+            />
+          </div>
         </span>
       </div>
     </div>
diff --git a/packages/big-design/src/components/Input/Input.tsx b/packages/big-design/src/components/Input/Input.tsx
index 7f2c593bf..64ee8cad5 100644
--- a/packages/big-design/src/components/Input/Input.tsx
+++ b/packages/big-design/src/components/Input/Input.tsx
@@ -3,43 +3,69 @@ import hoistNonReactStatics from 'hoist-non-react-statics';
 import React, { Ref } from 'react';
 
 import { uniqueId } from '../../utils';
+import { Chip } from '../Chip';
 import { Form } from '../Form';
 import { Small } from '../Typography';
 
-import { StyledIconWrapper, StyledInput, StyledInputWrapper } from './styled';
+import { StyledIconWrapper, StyledInput, StyledInputContent, StyledInputWrapper } from './styled';
 
 interface Props {
+  chips?: string[];
   description?: React.ReactChild;
   error?: React.ReactChild | React.ReactChild[];
   iconLeft?: React.ReactChild;
   iconRight?: React.ReactChild;
   label?: React.ReactChild;
   theme?: ThemeInterface;
+  onChipDelete?(chip: string): () => void;
 }
 
 interface PrivateProps {
   forwardedRef: Ref<HTMLInputElement>;
 }
 
+interface InputState {
+  focus: boolean;
+}
+
 export type InputProps = Props & React.InputHTMLAttributes<HTMLInputElement>;
 
-class StyleableInput extends React.PureComponent<InputProps & PrivateProps> {
+class StyleableInput extends React.PureComponent<InputProps & PrivateProps, InputState> {
   static Description = Small;
   static Error = Form.Error;
   static Label = Form.Label;
+
+  readonly state: InputState = {
+    focus: false,
+  };
+
   private readonly uniqueId = uniqueId('input_');
 
   render() {
-    const { description, label, forwardedRef, ...props } = this.props;
+    const { chips, description, disabled, error, label, forwardedRef, onChipDelete, ...props } = this.props;
     const id = this.getId();
 
     return (
       <div>
         {this.renderLabel()}
         {this.renderDescription()}
-        <StyledInputWrapper>
+        <StyledInputWrapper disabled={disabled} error={error} focus={this.state.focus}>
           {this.renderIconLeft()}
-          <StyledInput {...props} onChange={this.onInputChange} id={id} ref={forwardedRef} />
+          <StyledInputContent chips={chips}>
+            {this.renderChips()}
+            <StyledInput
+              {...props}
+              disabled={disabled}
+              chips={chips}
+              error={error}
+              id={id}
+              onBlur={this.onInputBlur}
+              onChange={this.onInputChange}
+              onFocus={this.onInputFocus}
+              ref={forwardedRef}
+            />
+          </StyledInputContent>
+
           {this.renderIconRight()}
         </StyledInputWrapper>
       </div>
@@ -63,6 +89,22 @@ class StyleableInput extends React.PureComponent<InputProps & PrivateProps> {
     }
   };
 
+  private onInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {
+    const { onFocus } = this.props;
+
+    this.setFocus(true);
+
+    return onFocus && onFocus(event);
+  };
+
+  private onInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+    const { onBlur } = this.props;
+
+    this.setFocus(false);
+
+    return onBlur && onBlur(event);
+  };
+
   private renderDescription() {
     const { description } = this.props;
 
@@ -99,7 +141,7 @@ class StyleableInput extends React.PureComponent<InputProps & PrivateProps> {
       return null;
     }
 
-    return <StyledIconWrapper position="left">{this.props.iconLeft}</StyledIconWrapper>;
+    return <StyledIconWrapper>{this.props.iconLeft}</StyledIconWrapper>;
   }
 
   private renderIconRight() {
@@ -107,7 +149,31 @@ class StyleableInput extends React.PureComponent<InputProps & PrivateProps> {
       return null;
     }
 
-    return <StyledIconWrapper position="right">{this.props.iconRight}</StyledIconWrapper>;
+    return <StyledIconWrapper>{this.props.iconRight}</StyledIconWrapper>;
+  }
+
+  private setFocus(toggle: boolean) {
+    this.setState({ focus: toggle });
+  }
+
+  private renderChips() {
+    const { chips, onChipDelete } = this.props;
+
+    if (!chips) {
+      return null;
+    }
+
+    return chips.map((chip, key) =>
+      onChipDelete ? (
+        <Chip key={key} marginBottom="none" onDelete={onChipDelete(chip)}>
+          {chip}
+        </Chip>
+      ) : (
+        <Chip key={key} marginBottom="none" marginTop="none">
+          {chip}
+        </Chip>
+      ),
+    );
   }
 }
 
diff --git a/packages/big-design/src/components/Input/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Input/__snapshots__/spec.tsx.snap
index 480fa5909..6af3675fd 100644
--- a/packages/big-design/src/components/Input/__snapshots__/spec.tsx.snap
+++ b/packages/big-design/src/components/Input/__snapshots__/spec.tsx.snap
@@ -26,74 +26,92 @@ exports[`renders all together 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  background-color: #FFFFFF;
+  border-radius: 0.25rem;
+  box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  position: relative;
-}
-
-.c6 {
-  background-color: #FFFFFF;
-  border-radius: 0.25rem;
-  box-sizing: border-box;
-  color: #313440;
-  height: 2.25rem;
-  line-height: 1.5rem;
+  min-height: 2.25rem;
   padding: 0.25rem 0.75rem;
   width: 100%;
   border: 1px solid #D9DCE9;
-  padding-right: 2.5rem;
-  padding-left: 2.5rem;
 }
 
-.c6:hover:not([disabled]) {
+.c3:hover:not([disabled]) {
   border: 1px solid #B4BAD1;
 }
 
-.c6:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px #DBE3FE;
+.c3[disabled] {
+  background-color: #ECEEF5;
 }
 
-.c6[disabled] {
-  background-color: #ECEEF5;
+.c7 {
+  border: 0;
+  box-sizing: border-box;
+  color: #313440;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  height: 1.5rem;
+  margin-top: 0.25rem;
+  padding: 0;
+  width: 100%;
+  padding-right: 0.25rem;
+  padding-left: 0.25rem;
+}
+
+.c7:focus {
+  outline: none;
 }
 
-.c6::-webkit-input-placeholder {
+.c7::-webkit-input-placeholder {
   color: #B4BAD1;
-  line-height: 1.5rem;
   font-size: 1rem;
 }
 
-.c6::-moz-placeholder {
+.c7::-moz-placeholder {
   color: #B4BAD1;
-  line-height: 1.5rem;
   font-size: 1rem;
 }
 
-.c6:-ms-input-placeholder {
+.c7:-ms-input-placeholder {
   color: #B4BAD1;
-  line-height: 1.5rem;
   font-size: 1rem;
 }
 
-.c6::placeholder {
+.c7::placeholder {
   color: #B4BAD1;
-  line-height: 1.5rem;
   font-size: 1rem;
 }
 
+.c7[disabled] {
+  background-color: #ECEEF5;
+}
+
 .c4 {
-  position: absolute;
   color: #5E637A;
-  left: 0.75rem;
+  -webkit-flex: 0 0 1.5rem;
+  -ms-flex: 0 0 1.5rem;
+  flex: 0 0 1.5rem;
+  height: 1.5rem;
 }
 
-.c7 {
-  position: absolute;
-  color: #5E637A;
-  right: 0.75rem;
+.c6 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  height: 100%;
+  margin-top: -0.25rem;
 }
 
 .c0 {
@@ -129,7 +147,7 @@ exports[`renders all together 1`] = `
   <span
     class="c2 c3"
   >
-    <span
+    <div
       class="c4"
     >
       <svg
@@ -151,13 +169,17 @@ exports[`renders all together 1`] = `
           d="M18 13h-5v5c0 .55-.45 1-1 1s-1-.45-1-1v-5H6c-.55 0-1-.45-1-1s.45-1 1-1h5V6c0-.55.45-1 1-1s1 .45 1 1v5h5c.55 0 1 .45 1 1s-.45 1-1 1z"
         />
       </svg>
-    </span>
-    <input
+    </div>
+    <div
       class="c6"
-      id="input_0"
-    />
-    <span
-      class="c7"
+    >
+      <input
+        class="c7"
+        id="input_0"
+      />
+    </div>
+    <div
+      class="c4"
     >
       <svg
         class="c5"
@@ -178,7 +200,7 @@ exports[`renders all together 1`] = `
           d="M18 13h-5v5c0 .55-.45 1-1 1s-1-.45-1-1v-5H6c-.55 0-1-.45-1-1s.45-1 1-1h5V6c0-.55.45-1 1-1s1 .45 1 1v5h5c.55 0 1 .45 1 1s-.45 1-1 1z"
         />
       </svg>
-    </span>
+    </div>
   </span>
 </div>
 `;
diff --git a/packages/big-design/src/components/Input/styled.tsx b/packages/big-design/src/components/Input/styled.tsx
index 2d139f0b4..e6dd4bd10 100644
--- a/packages/big-design/src/components/Input/styled.tsx
+++ b/packages/big-design/src/components/Input/styled.tsx
@@ -3,23 +3,17 @@ import styled, { css } from 'styled-components';
 
 import { InputProps } from './Input';
 
-interface StyledIconWrapperProps {
-  position?: 'left' | 'right';
+interface StyledInputWrapperProps extends InputProps {
+  focus: boolean;
 }
 
-export const StyledInputWrapper = styled.span<InputProps>`
+export const StyledInputWrapper = styled.span<StyledInputWrapperProps>`
   align-items: center;
-  display: flex;
-  position: relative;
-`;
-
-export const StyledInput = styled.input<InputProps>`
   background-color: ${({ theme }) => theme.colors.white};
   border-radius: ${({ theme }) => theme.borderRadius.normal};
   box-sizing: border-box;
-  color: ${({ theme }) => theme.colors.secondary70};
-  height: ${({ theme }) => addValues(theme.spacing.xxLarge, theme.spacing.xxSmall)};
-  line-height: ${({ theme }) => theme.lineHeight.medium};
+  display: flex;
+  min-height: ${({ theme }) => addValues(theme.spacing.xxLarge, theme.spacing.xxSmall)};
   padding: ${({ theme }) => `${theme.spacing.xxSmall} ${theme.spacing.small}`};
   width: 100%;
 
@@ -39,48 +33,82 @@ export const StyledInput = styled.input<InputProps>`
           `}
   }
 
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 4px ${props => (props.error ? props.theme.colors.danger20 : props.theme.colors.primary20)};
-  }
+  ${({ error, focus, theme }) =>
+    focus &&
+    css`
+      outline: none;
+      box-shadow: 0 0 0 4px ${error ? theme.colors.danger20 : theme.colors.primary20};
+    `};
 
   &[disabled] {
     background-color: ${({ theme }) => theme.colors.secondary20};
   }
+`;
+
+export const StyledInput = styled.input<InputProps>`
+  border: 0;
+  box-sizing: border-box;
+  color: ${({ theme }) => theme.colors.secondary70};
+  flex: 1;
+  height: ${({ theme }) => theme.spacing.xLarge};
+  margin-top: ${({ theme }) => theme.spacing.xxSmall};
+  padding: 0;
+  width: 100%;
+
+  &:focus {
+    outline: none;
+  }
 
   &::placeholder {
     color: ${({ theme }) => theme.colors.secondary40};
-    line-height: ${({ theme }) => theme.lineHeight.medium};
     font-size: ${({ theme }) => theme.typography.fontSize.medium};
   }
 
   ${props =>
     props.iconRight &&
     css`
-      padding-right: ${addValues(props.theme.spacing.xxLarge, props.theme.spacing.xSmall)};
+      padding-right: ${props.theme.spacing.xxSmall};
     `};
 
   ${props =>
     props.iconLeft &&
     css`
-      padding-left: ${addValues(props.theme.spacing.xxLarge, props.theme.spacing.xSmall)};
+      padding-left: ${props.theme.spacing.xxSmall};
     `};
+
+  ${props =>
+    props.chips &&
+    css`
+      padding-left: ${props.theme.spacing.xxSmall};
+    `};
+
+  &[disabled] {
+    background-color: ${({ theme }) => theme.colors.secondary20};
+  }
 `;
 
-export const StyledIconWrapper = styled.span<StyledIconWrapperProps>`
-  position: absolute;
+export const StyledIconWrapper = styled.div`
   color: ${({ theme }) => theme.colors.secondary60};
+  flex: 0 0 ${({ theme }) => theme.spacing.xLarge};
+  height: ${({ theme }) => theme.spacing.xLarge};
+`;
+
+export const StyledInputContent = styled.div<InputProps>`
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  flex: 1;
+  height: 100%;
+  margin-top: -${({ theme }) => theme.spacing.xxSmall};
 
   ${props =>
-    props.position === 'left'
-      ? css`
-          left: ${({ theme }) => theme.spacing.small};
-        `
-      : css`
-          right: ${({ theme }) => theme.spacing.small};
-        `};
+    props.chips &&
+    css`
+      margin-left: -${props.theme.spacing.xxSmall};
+    `};
 `;
 
 StyledInput.defaultProps = { theme: defaultTheme };
 StyledInputWrapper.defaultProps = { theme: defaultTheme };
-StyledIconWrapper.defaultProps = { theme: defaultTheme, position: 'left' };
+StyledIconWrapper.defaultProps = { theme: defaultTheme };
+StyledInputContent.defaultProps = { theme: defaultTheme };
diff --git a/packages/big-design/src/components/List/Action/Action.tsx b/packages/big-design/src/components/List/Action/Action.tsx
index a32312bde..4a8989497 100644
--- a/packages/big-design/src/components/List/Action/Action.tsx
+++ b/packages/big-design/src/components/List/Action/Action.tsx
@@ -1,4 +1,4 @@
-import React, { Ref } from 'react';
+import React, { memo, Ref } from 'react';
 
 import { ContentWrapper, StyledListAction, Wrapper } from './styled';
 
@@ -11,26 +11,18 @@ interface PrivateProps {
   forwardedRef: Ref<HTMLLIElement>;
 }
 
-class StyleableListAction extends React.PureComponent<ListActionProps & PrivateProps> {
-  static readonly defaultProps: Partial<ListActionProps> = {
-    actionType: 'normal' as 'normal',
-  };
-
-  render() {
-    const { children, forwardedRef, iconLeft, ...rest } = this.props;
-
-    return (
-      <StyledListAction ref={forwardedRef} {...rest}>
-        <Wrapper>
-          <ContentWrapper>
-            {iconLeft}
-            {children}
-          </ContentWrapper>
-        </Wrapper>
-      </StyledListAction>
-    );
-  }
-}
+const StyleableListAction: React.FC<ListActionProps & PrivateProps> = memo(
+  ({ actionType = 'normal' as 'normal', children, forwardedRef, iconLeft, ...rest }) => (
+    <StyledListAction actionType={actionType} ref={forwardedRef} {...rest}>
+      <Wrapper>
+        <ContentWrapper>
+          {iconLeft}
+          {children}
+        </ContentWrapper>
+      </Wrapper>
+    </StyledListAction>
+  ),
+);
 
 export const ListAction = React.forwardRef<HTMLLIElement, ListActionProps>((props, ref) => (
   <StyleableListAction {...props} forwardedRef={ref} />
diff --git a/packages/big-design/src/components/List/Item/CheckboxItem.tsx b/packages/big-design/src/components/List/Item/CheckboxItem.tsx
new file mode 100644
index 000000000..87a1261b0
--- /dev/null
+++ b/packages/big-design/src/components/List/Item/CheckboxItem.tsx
@@ -0,0 +1,39 @@
+import React, { memo, Ref } from 'react';
+
+import { Checkbox } from '../../Checkbox';
+
+import { StyledListItem } from './styled';
+
+export interface ListCheckboxItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+  checked?: boolean;
+  disabled?: boolean;
+  onCheckboxChange?(event: React.ChangeEvent<HTMLInputElement>): void;
+}
+
+interface PrivateProps {
+  forwardedRef: Ref<HTMLLIElement>;
+}
+
+const StyleableListCheckboxItem: React.FunctionComponent<ListCheckboxItemProps & PrivateProps> = memo(
+  ({ children, checked, disabled, forwardedRef, value, onCheckboxChange, ...rest }) => (
+    <StyledListItem disabled={disabled} onMouseDown={preventFocus} ref={forwardedRef} tabIndex={-1} {...rest}>
+      <Checkbox
+        checked={checked}
+        data-value={value}
+        disabled={disabled}
+        label={typeof children === 'string' ? children : ''}
+        onChange={onCheckboxChange}
+      />
+    </StyledListItem>
+  ),
+);
+
+function preventFocus(
+  event: React.MouseEvent<HTMLLIElement, MouseEvent> | React.MouseEvent<HTMLInputElement, MouseEvent>,
+) {
+  event.preventDefault();
+}
+
+export const ListCheckboxItem = React.forwardRef<HTMLLIElement, ListCheckboxItemProps>((props, ref) => (
+  <StyleableListCheckboxItem {...props} forwardedRef={ref} />
+));
diff --git a/packages/big-design/src/components/List/Item/Item.tsx b/packages/big-design/src/components/List/Item/Item.tsx
index 35653021f..51dbdac0a 100644
--- a/packages/big-design/src/components/List/Item/Item.tsx
+++ b/packages/big-design/src/components/List/Item/Item.tsx
@@ -13,14 +13,18 @@ interface PrivateProps {
 
 const StyleableListItem: React.FC<ListItemProps & PrivateProps> = memo(({ children, forwardedRef, value, ...rest }) => {
   return (
-    <StyledListItem ref={forwardedRef} tabIndex={-1} data-value={value} {...rest}>
+    <StyledListItem ref={forwardedRef} tabIndex={-1} data-value={value} onMouseDown={preventFocus} {...rest}>
       {children}
 
-      {rest['aria-selected'] && <CheckIcon color="primary" size={'small'} />}
+      {rest['aria-selected'] && <CheckIcon color="primary" size={'large'} />}
     </StyledListItem>
   );
 });
 
+function preventFocus(event: React.MouseEvent<HTMLLIElement, MouseEvent>) {
+  event.preventDefault();
+}
+
 export const ListItem = React.forwardRef<HTMLLIElement, ListItemProps>((props, ref) => (
   <StyleableListItem {...props} forwardedRef={ref} />
 ));
diff --git a/packages/big-design/src/components/List/Item/styled.tsx b/packages/big-design/src/components/List/Item/styled.tsx
index 0511e2d9b..b338f68de 100644
--- a/packages/big-design/src/components/List/Item/styled.tsx
+++ b/packages/big-design/src/components/List/Item/styled.tsx
@@ -19,7 +19,11 @@ export const StyledListItem = styled.li<ListItemProps>`
   }
 
   &[data-highlighted='true'] {
-    background-color: ${({ theme }) => theme.colors.secondary10};
+    ${({ disabled }) =>
+      !disabled &&
+      css`
+        background-color: ${({ theme }) => theme.colors.secondary10};
+      `}
   }
 
   a {
diff --git a/packages/big-design/src/components/List/List.tsx b/packages/big-design/src/components/List/List.tsx
index 6f48cb9a1..f1cf2867e 100644
--- a/packages/big-design/src/components/List/List.tsx
+++ b/packages/big-design/src/components/List/List.tsx
@@ -1,5 +1,5 @@
 import { Placement } from 'popper.js';
-import React from 'react';
+import React, { memo } from 'react';
 import { Popper, RefHandler } from 'react-popper';
 
 import { StyledList } from './styled';
@@ -15,46 +15,37 @@ interface Props {
 
 type ListProps = Props & React.HTMLAttributes<HTMLUListElement>;
 
-export class List extends React.PureComponent<ListProps> {
-  static defaultProps: Partial<Props> = {
-    maxHeight: 250,
-    placement: 'bottom-start',
-  };
-
-  render() {
-    const {
-      children,
-      handleListRef,
-      isOpen,
-      maxHeight,
-      placement: selectedPlacement,
-      positionFixed,
-      ...rest
-    } = this.props;
-
-    return (
-      <Popper
-        innerRef={handleListRef}
-        placement={selectedPlacement}
-        positionFixed={positionFixed}
-        modifiers={{ offset: { offset: '0, 10' } }}
-      >
-        {({ placement, ref, scheduleUpdate, style }) => (
-          <StyledList
-            data-placement={placement}
-            isOpen={isOpen}
-            maxHeight={maxHeight}
-            ref={ref}
-            style={style}
-            tabIndex={-1}
-            {...rest}
-          >
-            <ListPopperElement isOpen={isOpen} scheduleUpdate={scheduleUpdate}>
-              {children}
-            </ListPopperElement>
-          </StyledList>
-        )}
-      </Popper>
-    );
-  }
-}
+export const List: React.FC<ListProps> = memo(
+  ({
+    children,
+    handleListRef,
+    isOpen,
+    maxHeight = 250,
+    placement: selectedPlacement = 'bottom-start' as 'bottom-start',
+    positionFixed,
+    ...rest
+  }) => (
+    <Popper
+      innerRef={handleListRef}
+      placement={selectedPlacement}
+      positionFixed={positionFixed}
+      modifiers={{ offset: { offset: '0, 10' } }}
+    >
+      {({ placement, ref, scheduleUpdate, style }) => (
+        <StyledList
+          data-placement={placement}
+          isOpen={isOpen}
+          maxHeight={maxHeight}
+          ref={ref}
+          style={style}
+          tabIndex={-1}
+          {...rest}
+        >
+          <ListPopperElement isOpen={isOpen} scheduleUpdate={scheduleUpdate}>
+            {children}
+          </ListPopperElement>
+        </StyledList>
+      )}
+    </Popper>
+  ),
+);
diff --git a/packages/big-design/src/components/Pagination/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Pagination/__snapshots__/spec.tsx.snap
index 6b304913f..b1e6e972c 100644
--- a/packages/big-design/src/components/Pagination/__snapshots__/spec.tsx.snap
+++ b/packages/big-design/src/components/Pagination/__snapshots__/spec.tsx.snap
@@ -381,7 +381,7 @@ exports[`render pagination component 1`] = `
       aria-labelledby="trigger_1"
       class="c7"
       id="dropdown_0"
-      role="menu"
+      role="listbox"
       style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none;"
       tabindex="-1"
     >
@@ -389,7 +389,7 @@ exports[`render pagination component 1`] = `
         class="c8"
         data-value="2"
         id="dropdown_0-item-0"
-        role="menuitem"
+        role="option"
         tabindex="-1"
       >
         2
@@ -399,7 +399,7 @@ exports[`render pagination component 1`] = `
         class="c8"
         data-value="3"
         id="dropdown_0-item-1"
-        role="menuitem"
+        role="option"
         tabindex="-1"
       >
         3
@@ -409,7 +409,7 @@ exports[`render pagination component 1`] = `
         class="c8"
         data-value="5"
         id="dropdown_0-item-2"
-        role="menuitem"
+        role="option"
         tabindex="-1"
       >
         5
@@ -866,7 +866,7 @@ exports[`render pagination component with invalid page info 1`] = `
       aria-labelledby="trigger_1"
       class="c7"
       id="dropdown_0"
-      role="menu"
+      role="listbox"
       style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none;"
       tabindex="-1"
     >
@@ -874,7 +874,7 @@ exports[`render pagination component with invalid page info 1`] = `
         class="c8"
         data-value="2"
         id="dropdown_0-item-0"
-        role="menuitem"
+        role="option"
         tabindex="-1"
       >
         2
@@ -884,7 +884,7 @@ exports[`render pagination component with invalid page info 1`] = `
         class="c8"
         data-value="3"
         id="dropdown_0-item-1"
-        role="menuitem"
+        role="option"
         tabindex="-1"
       >
         3
@@ -894,7 +894,7 @@ exports[`render pagination component with invalid page info 1`] = `
         class="c8"
         data-value="5"
         id="dropdown_0-item-2"
-        role="menuitem"
+        role="option"
         tabindex="-1"
       >
         5
@@ -1351,7 +1351,7 @@ exports[`render pagination component with invalid range info 1`] = `
       aria-labelledby="trigger_1"
       class="c7"
       id="dropdown_0"
-      role="menu"
+      role="listbox"
       style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none;"
       tabindex="-1"
     >
@@ -1359,7 +1359,7 @@ exports[`render pagination component with invalid range info 1`] = `
         class="c8"
         data-value="2"
         id="dropdown_0-item-0"
-        role="menuitem"
+        role="option"
         tabindex="-1"
       >
         2
@@ -1369,7 +1369,7 @@ exports[`render pagination component with invalid range info 1`] = `
         class="c8"
         data-value="3"
         id="dropdown_0-item-1"
-        role="menuitem"
+        role="option"
         tabindex="-1"
       >
         3
@@ -1379,7 +1379,7 @@ exports[`render pagination component with invalid range info 1`] = `
         class="c8"
         data-value="5"
         id="dropdown_0-item-2"
-        role="menuitem"
+        role="option"
         tabindex="-1"
       >
         5
@@ -1837,7 +1837,7 @@ exports[`render pagination component with no items 1`] = `
       aria-labelledby="trigger_1"
       class="c7"
       id="dropdown_0"
-      role="menu"
+      role="listbox"
       style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none;"
       tabindex="-1"
     >
@@ -1845,7 +1845,7 @@ exports[`render pagination component with no items 1`] = `
         class="c8"
         data-value="2"
         id="dropdown_0-item-0"
-        role="menuitem"
+        role="option"
         tabindex="-1"
       >
         2
@@ -1855,7 +1855,7 @@ exports[`render pagination component with no items 1`] = `
         class="c8"
         data-value="3"
         id="dropdown_0-item-1"
-        role="menuitem"
+        role="option"
         tabindex="-1"
       >
         3
@@ -1865,7 +1865,7 @@ exports[`render pagination component with no items 1`] = `
         class="c8"
         data-value="5"
         id="dropdown_0-item-2"
-        role="menuitem"
+        role="option"
         tabindex="-1"
       >
         5
diff --git a/packages/big-design/src/components/Select/Select.tsx b/packages/big-design/src/components/Select/Select.tsx
index 21216d953..3e4118bd9 100644
--- a/packages/big-design/src/components/Select/Select.tsx
+++ b/packages/big-design/src/components/Select/Select.tsx
@@ -1,14 +1,16 @@
 import { Placement } from 'popper.js';
-import React, { AllHTMLAttributes, RefObject } from 'react';
+import React, { RefObject } from 'react';
 import { Manager, Reference } from 'react-popper';
 import scrollIntoView from 'scroll-into-view-if-needed';
 
 import { uniqueId } from '../../utils';
-import { Flex } from '../Flex';
+import { Flex } from '../Flex/Flex';
+import { Label } from '../Form/Label';
 import { Input } from '../Input';
-import { List } from '../List';
-import { ListAction } from '../List/Action';
-import { ListItem } from '../List/Item';
+import { ListAction } from '../List/Action/Action';
+import { ListCheckboxItem } from '../List/Item/CheckboxItem';
+import { ListItem } from '../List/Item/Item';
+import { List } from '../List/List';
 
 import { Form } from './../Form';
 import { StyledDropdownIcon, StyledStatusMessage } from './styled';
@@ -26,12 +28,13 @@ interface Props {
   error?: React.ReactChild;
   label?: React.ReactChild;
   maxHeight?: number;
+  multi?: boolean;
   placement?: Placement;
   positionFixed?: boolean;
   required?: boolean;
-  value?: AllHTMLAttributes<HTMLElement>['value'];
+  value?: string | number | Array<string | number>;
   onActionClick?(inputText: string): void;
-  onItemChange(value: AllHTMLAttributes<HTMLElement>['value']): void;
+  onItemChange(value: string | number | Array<string | number>): void;
 }
 
 export type SelectProps = Props & React.HTMLAttributes<HTMLUListElement>;
@@ -49,7 +52,7 @@ export class Select extends React.PureComponent<SelectProps, SelectState> {
     selectedItem: null,
   };
 
-  private inputRef: HTMLInputElement | null = null;
+  private inputRef: RefObject<HTMLInputElement> = React.createRef();
   private listRef: HTMLUListElement | null = null;
 
   private readonly uniqueInputId = uniqueId('input_');
@@ -91,6 +94,7 @@ export class Select extends React.PureComponent<SelectProps, SelectState> {
       children,
       label,
       maxHeight,
+      multi,
       onActionClick,
       onItemChange,
       placeholder,
@@ -106,8 +110,11 @@ export class Select extends React.PureComponent<SelectProps, SelectState> {
 
     this.listItemsRefs = [];
 
-    const ariaOwns = isOpen ? { 'aria-owns': selectId } : {};
     const ariaLabelledBy = label ? { 'aria-labelledby': labelId } : {};
+    const ariaMultiSelect = multi ? { 'aria-multiselectable': true } : {};
+    const ariaOwns = isOpen ? { 'aria-owns': selectId } : {};
+
+    const listItems = this.renderChildren();
 
     return (
       <Manager>
@@ -120,11 +127,12 @@ export class Select extends React.PureComponent<SelectProps, SelectState> {
             isOpen={isOpen}
             maxHeight={maxHeight}
             placement={placement}
-            role={'listbox'}
+            role="listbox"
             {...ariaLabelledBy}
+            {...ariaMultiSelect}
             {...rest}
           >
-            {this.renderChildren()}
+            {listItems}
           </List>
         </div>
         <StyledStatusMessage
@@ -137,8 +145,143 @@ export class Select extends React.PureComponent<SelectProps, SelectState> {
     );
   }
 
+  private renderLabel() {
+    const { label } = this.props;
+
+    const inputId = this.getInputId();
+    const labelId = this.getLabelId();
+
+    if (typeof label === 'string') {
+      return (
+        <Label htmlFor={inputId} id={labelId}>
+          {label}
+        </Label>
+      );
+    }
+
+    if (React.isValidElement(label) && label.type === Input.Label) {
+      return React.cloneElement<React.LabelHTMLAttributes<HTMLLabelElement>>(label, {
+        htmlFor: inputId,
+        id: labelId,
+      });
+    }
+
+    return null;
+  }
+
+  private renderInput() {
+    const { placeholder, children, error, required, disabled, onItemChange, value } = this.props;
+    const { highlightedItem, inputText, isOpen } = this.state;
+
+    const ariaActiveDescendant = highlightedItem ? { 'aria-activedescendant': highlightedItem.id } : {};
+    const ariaControls = isOpen ? { 'aria-controls': this.getSelectId() } : {};
+
+    if (this.inputRef && this.inputRef.current) {
+      const hasError = Boolean(error);
+      const errorMessage = typeof error === 'string' ? error : 'Invalid input';
+
+      this.inputRef.current.setCustomValidity(hasError ? errorMessage : '');
+    }
+
+    const chips = this.renderChips();
+
+    const listItems = React.Children.map(children, child => {
+      if (!React.isValidElement(child)) {
+        return;
+      }
+
+      return { value: child.props.value, text: child.props.children };
+    });
+
+    const onChipDelete = (chip: string) => () => {
+      const filteredValues = Array.isArray(value)
+        ? value.filter(val => {
+            const listItem = listItems.find(item => item && String(item.value) === String(val));
+
+            return listItem && listItem.text !== chip;
+          })
+        : '';
+
+      onItemChange(filteredValues);
+
+      return this.inputRef && this.inputRef.current && this.inputRef.current.focus();
+    };
+
+    return (
+      <Reference>
+        {({ ref }) => (
+          <span ref={ref}>
+            <Input
+              autoComplete="off"
+              chips={chips}
+              disabled={disabled}
+              error={error}
+              iconRight={this.renderDropdownIcon()}
+              id={this.getInputId()}
+              onChange={this.handleOnInputChange}
+              onChipDelete={chips && onChipDelete}
+              onFocus={this.handleOnInputFocus}
+              onKeyDown={this.handleOnInputKeyDown}
+              placeholder={placeholder}
+              ref={this.inputRef}
+              required={required}
+              type={'text'}
+              value={inputText}
+              aria-autocomplete="list"
+              {...ariaActiveDescendant}
+              {...ariaControls}
+            ></Input>
+          </span>
+        )}
+      </Reference>
+    );
+  }
+
+  private renderChips() {
+    const { children, multi, value } = this.props;
+
+    if (!multi || !value) {
+      return;
+    }
+
+    const listItems = React.Children.map(children, child => {
+      if (!React.isValidElement(child)) {
+        return;
+      }
+
+      return { value: child.props.value, text: child.props.children };
+    });
+
+    if (Array.isArray(value)) {
+      return value.map(val => {
+        const selectedItem = listItems.find(item => item && String(item.value) === String(val));
+
+        return selectedItem && selectedItem.text;
+      });
+    } else {
+      const listItem = listItems.find(item => item && String(item.value) === String(value));
+
+      return listItem && [listItem.text];
+    }
+  }
+
+  private renderDropdownIcon() {
+    return (
+      <Flex>
+        <StyledDropdownIcon
+          aria-haspopup={true}
+          aria-label="toggle menu" // Will need to translate this label in the future
+          onClick={this.toggleList}
+          role="button"
+          tabIndex={-1}
+          style={{ outline: 'none' }}
+        />
+      </Flex>
+    );
+  }
+
   private renderChildren() {
-    const { children } = this.props;
+    const { children, multi, value } = this.props;
 
     return React.Children.map(children, (child, index) => {
       if (!React.isValidElement(child)) {
@@ -149,26 +292,59 @@ export class Select extends React.PureComponent<SelectProps, SelectState> {
 
       switch (child.type) {
         case ListItem:
+          // For now, we only support ListItems that only have text as children
+          if (typeof child.props.children !== 'string') {
+            return;
+          }
+
           if (
             !this.state.filterChildren ||
             child.props.children.toLowerCase().startsWith(this.state.inputText.toLocaleLowerCase())
           ) {
             const id = this.getItemId(child, index);
-            this.listItemsRefs.push(ref);
-
-            return React.cloneElement(child, {
-              'aria-selected': child.props.value === this.props.value,
-              'data-highlighted': this.state.highlightedItem && id === this.state.highlightedItem.id,
-              id,
-              onClick: child.props.disabled ? null : this.handleOnItemClick,
-              onMouseOver: this.handleOnItemMouseOver,
-              ref,
-              role: 'option',
-            }) as React.LiHTMLAttributes<HTMLLIElement>;
+
+            if (!child.props.disabled) {
+              this.listItemsRefs.push(ref);
+            }
+
+            const ariaSelected = child.props.value === value ? { 'aria-selected': true } : {};
+
+            return multi
+              ? (React.cloneElement(
+                  { ...child, type: ListCheckboxItem },
+                  {
+                    'aria-selected': Array.isArray(value)
+                      ? value.includes(String(child.props.value))
+                      : value && String(value) === String(child.props.value),
+                    checked: Array.isArray(value)
+                      ? value.includes(String(child.props.value))
+                      : value && String(value) === String(child.props.value),
+                    'data-highlighted': this.state.highlightedItem && id === this.state.highlightedItem.id,
+                    id,
+                    onCheckboxChange: child.props.disabled ? null : this.handleOnCheckboxItemChange,
+                    onMouseOver: this.handleOnItemMouseOver,
+                    ref,
+                    role: 'option',
+                  },
+                ) as React.LiHTMLAttributes<HTMLLIElement>)
+              : (React.cloneElement(child, {
+                  ...ariaSelected,
+                  'data-highlighted': this.state.highlightedItem && id === this.state.highlightedItem.id,
+                  id,
+                  onClick: child.props.disabled ? null : this.handleOnItemClick,
+                  onMouseOver: this.handleOnItemMouseOver,
+                  ref,
+                  role: 'option',
+                }) as React.LiHTMLAttributes<HTMLLIElement>);
           }
 
           return;
         case ListAction:
+          // For now, we only support ListActions that only have text as children
+          if (typeof child.props.children !== 'string') {
+            return;
+          }
+
           const actionId = this.getActionId(child, index);
           this.listItemsRefs.push(ref);
 
@@ -186,87 +362,14 @@ export class Select extends React.PureComponent<SelectProps, SelectState> {
     });
   }
 
-  private renderDropdownIcon() {
-    return (
-      <Flex>
-        <StyledDropdownIcon
-          aria-haspopup={true}
-          aria-label="toggle menu" // Will need to translate this label in the future
-          onClick={this.toggleList}
-          role="button"
-          tabIndex={-1}
-          style={{ outline: 'none' }}
-        />
-      </Flex>
-    );
-  }
-
-  private renderLabel() {
-    const { label } = this.props;
-
-    const inputId = this.getInputId();
-    const labelId = this.getLabelId();
-
-    if (typeof label === 'string') {
-      return (
-        <Input.Label htmlFor={inputId} id={labelId}>
-          {label}
-        </Input.Label>
-      );
-    }
-
-    if (React.isValidElement(label) && label.type === Input.Label) {
-      return React.cloneElement<React.LabelHTMLAttributes<HTMLLabelElement>>(label, {
-        htmlFor: inputId,
-        id: labelId,
-      });
-    }
-
-    return null;
-  }
-
-  private renderInput() {
-    const { label, placeholder, error, required, disabled } = this.props;
-    const { highlightedItem, inputText } = this.state;
-
-    const ariaActiveDescendant = highlightedItem ? { 'aria-activedescendant': highlightedItem.id } : {};
-    const ariaControls = this.state.isOpen ? { 'aria-controls': this.getSelectId() } : {};
-    const ariaLabelledBy = label ? { 'aria-labelledby': this.getLabelId() } : {};
-
-    if (this.inputRef) {
-      const hasError = Boolean(error);
-      const errorMessage = typeof error === 'string' ? error : 'Invalid input';
+  private toggleList = () => {
+    const { disabled } = this.props;
 
-      this.inputRef.setCustomValidity(hasError ? errorMessage : '');
+    if (disabled) {
+      return;
     }
 
-    return (
-      <Reference innerRef={node => (this.inputRef = node as HTMLInputElement)}>
-        {({ ref }) => (
-          <Input
-            autoComplete="off"
-            error={error}
-            iconRight={this.renderDropdownIcon()}
-            id={this.getInputId()}
-            onChange={this.handleOnInputChange}
-            onKeyDown={this.handleOnInputKeyDown}
-            onFocus={this.handleOnInputFocus}
-            placeholder={placeholder}
-            ref={ref}
-            required={required}
-            disabled={disabled}
-            value={inputText}
-            {...ariaActiveDescendant}
-            {...ariaControls}
-            {...ariaLabelledBy}
-          />
-        )}
-      </Reference>
-    );
-  }
-
-  private toggleList = () => {
-    this.state.isOpen ? this.closeList() : this.openList();
+    return this.state.isOpen ? this.closeList() : this.openList();
   };
 
   private openList() {
@@ -279,7 +382,7 @@ export class Select extends React.PureComponent<SelectProps, SelectState> {
         this.updateHighlightedItem(selectedItem, true, true);
       }
 
-      return this.inputRef && this.inputRef.focus({ preventScroll: true });
+      return this.inputRef && this.inputRef.current && this.inputRef.current.focus({ preventScroll: true });
     });
   }
 
@@ -288,8 +391,11 @@ export class Select extends React.PureComponent<SelectProps, SelectState> {
 
     const text = selectedItem && selectedItem.textContent;
 
-    this.setState({ filterChildren: false, highlightedItem: null, inputText: text ? text : '', isOpen: false }, () => {
+    this.setState({ filterChildren: false, highlightedItem: null, inputText: text ? text : '' }, () => {
       document.removeEventListener('mousedown', this.handleOnClickOutside, false);
+
+      // Need to wait for the state to be updated before we close for VO
+      this.setState({ isOpen: false });
     });
   }
 
@@ -337,12 +443,14 @@ export class Select extends React.PureComponent<SelectProps, SelectState> {
     }
 
     const selectedItemRef = this.listItemsRefs.find(
-      item => item.current && item.current.getAttribute('data-value') === String(value),
+      ref => ref.current && ref.current.getAttribute('data-value') === String(value),
     );
-    const selectedItem = selectedItemRef && selectedItemRef.current;
+    const selectedItemElement = selectedItemRef && selectedItemRef.current;
 
     return (
-      selectedItem && selectedItem.textContent && this.setState({ inputText: selectedItem.textContent, selectedItem })
+      selectedItemElement &&
+      selectedItemElement.textContent &&
+      this.setState({ inputText: selectedItemElement.textContent, selectedItem: selectedItemElement })
     );
   }
 
@@ -367,7 +475,11 @@ export class Select extends React.PureComponent<SelectProps, SelectState> {
 
     if (
       (this.listRef && this.listRef.contains(event.target as Node)) ||
-      (this.inputRef && this.inputRef.parentElement && this.inputRef.parentElement.contains(event.target as Node))
+      (this.inputRef &&
+        this.inputRef.current &&
+        this.inputRef.current.parentElement &&
+        this.inputRef.current.parentElement.parentElement &&
+        this.inputRef.current.parentElement.parentElement.contains(event.target as Node))
     ) {
       return;
     }
@@ -377,6 +489,33 @@ export class Select extends React.PureComponent<SelectProps, SelectState> {
     }
   };
 
+  private handleOnCheckboxItemChange = () => {
+    const { onItemChange, value } = this.props;
+    const { highlightedItem } = this.state;
+
+    if (!highlightedItem) {
+      return;
+    }
+
+    const checkbox = highlightedItem.querySelector('input[type="checkbox"]') as HTMLInputElement;
+
+    const selectedValue = checkbox.getAttribute('data-value');
+
+    if (!selectedValue) {
+      return;
+    }
+
+    if (checkbox.checked) {
+      onItemChange(Array.isArray(value) ? value.concat(selectedValue) : [value as string, selectedValue]);
+    } else {
+      onItemChange(Array.isArray(value) ? value.filter(val => String(val) !== String(selectedValue)) : []);
+    }
+
+    if (this.inputRef && this.inputRef.current) {
+      this.inputRef.current.focus({ preventScroll: true });
+    }
+  };
+
   private handleOnItemClick = () => {
     const { onItemChange } = this.props;
     const { highlightedItem } = this.state;
@@ -393,10 +532,6 @@ export class Select extends React.PureComponent<SelectProps, SelectState> {
       }
     }
 
-    if (this.inputRef) {
-      this.inputRef.focus({ preventScroll: true });
-    }
-
     if (this.state.isOpen) {
       this.toggleList();
     }
@@ -407,7 +542,7 @@ export class Select extends React.PureComponent<SelectProps, SelectState> {
   };
 
   private handleOnInputFocus = () => {
-    if (!this.props.value && !this.state.isOpen) {
+    if (!this.state.isOpen) {
       this.toggleList();
     }
   };
@@ -487,16 +622,30 @@ export class Select extends React.PureComponent<SelectProps, SelectState> {
     }
 
     switch (event.key) {
-      case 'Enter':
-      case ' ': {
+      case 'Enter': {
         if (this.state.isOpen) {
           event.preventDefault();
-          this.handleOnItemClick();
+          this.clickHighlightedItem();
         } else {
           this.toggleList();
         }
         break;
       }
+      case 'Backspace': {
+        if (this.state.inputText === '' && this.props.multi) {
+          return Array.isArray(this.props.value)
+            ? this.props.onItemChange(this.props.value.slice(0, this.props.value.length - 1))
+            : this.props.onItemChange([]);
+        }
+        break;
+      }
+      case ' ': {
+        if (!this.state.isOpen) {
+          event.preventDefault();
+          this.toggleList();
+        }
+        break;
+      }
       case 'ArrowUp':
       case 'ArrowLeft': {
         event.preventDefault();
@@ -542,4 +691,16 @@ export class Select extends React.PureComponent<SelectProps, SelectState> {
       scrollMode: 'if-needed',
     });
   };
+
+  private clickHighlightedItem() {
+    const { highlightedItem } = this.state;
+
+    if (!highlightedItem) {
+      return;
+    }
+
+    const checkbox = highlightedItem && (highlightedItem.querySelector('input[type="checkbox"]') as HTMLInputElement);
+
+    return checkbox ? checkbox.click() : highlightedItem.click();
+  }
 }
diff --git a/packages/big-design/src/components/Select/spec.tsx b/packages/big-design/src/components/Select/spec.tsx
index 7e1fb0639..e5bbc951e 100644
--- a/packages/big-design/src/components/Select/spec.tsx
+++ b/packages/big-design/src/components/Select/spec.tsx
@@ -18,6 +18,15 @@ const SelectMock = (
   </Select>
 );
 
+const MultiselectMock = (
+  <Select multi={true} onItemChange={onItemChange} label="Countries" placeholder="Choose country" value={['us', 'mx']}>
+    <Select.Option value="us">United States</Select.Option>
+    <Select.Option value="mx">Mexico</Select.Option>
+    <Select.Option value="ca">Canada</Select.Option>
+    <Select.Option value="en">England</Select.Option>
+  </Select>
+);
+
 test('renders select combobox', () => {
   const { getByRole } = render(SelectMock);
 
@@ -60,14 +69,6 @@ test('select input has placeholder text', () => {
   expect(getByPlaceholderText('Choose country')).toBeDefined();
 });
 
-test('select input has aria-labelledby', () => {
-  const { getAllByLabelText, getByText } = render(SelectMock);
-  const input = getAllByLabelText('Countries')[0];
-  const label = getByText('Countries');
-
-  expect(input.getAttribute('aria-labelledby')).toBe(label.id);
-});
-
 test('select input has aria-controls', () => {
   const { getByRole, getAllByLabelText } = render(SelectMock);
   const input = getAllByLabelText('Countries')[0];
@@ -117,6 +118,28 @@ test('select menu opens/closes when input button is clicked', () => {
   expect(queryByRole('listbox')).toHaveStyle('height: 1px');
 });
 
+test('esc should close menu', () => {
+  const { getAllByLabelText, queryByRole } = render(SelectMock);
+  const input = getAllByLabelText('Countries')[0];
+
+  fireEvent.focus(input);
+  expect(queryByRole('listbox')).not.toHaveStyle('height: 1px');
+
+  fireEvent.keyDown(input, { key: 'Escape' });
+  expect(queryByRole('listbox')).toHaveStyle('height: 1px');
+});
+
+test('tab should close menu', () => {
+  const { getAllByLabelText, queryByRole } = render(SelectMock);
+  const input = getAllByLabelText('Countries')[0];
+
+  fireEvent.focus(input);
+  expect(queryByRole('listbox')).not.toHaveStyle('height: 1px');
+
+  fireEvent.keyDown(input, { key: 'Tab' });
+  expect(queryByRole('listbox')).toHaveStyle('height: 1px');
+});
+
 test('select has items', () => {
   const { getAllByRole } = render(SelectMock);
 
@@ -230,28 +253,6 @@ test('up/down arrows should change select item selection', () => {
   expect(input.getAttribute('aria-activedescendant')).toEqual(options[0].id);
 });
 
-test('esc should close menu', () => {
-  const { getAllByLabelText, queryByRole } = render(SelectMock);
-  const input = getAllByLabelText('Countries')[0];
-
-  fireEvent.focus(input);
-  expect(queryByRole('listbox')).not.toHaveStyle('height: 1px');
-
-  fireEvent.keyDown(input, { key: 'Escape' });
-  expect(queryByRole('listbox')).toHaveStyle('height: 1px');
-});
-
-test('tab should close menu', () => {
-  const { getAllByLabelText, queryByRole } = render(SelectMock);
-  const input = getAllByLabelText('Countries')[0];
-
-  fireEvent.focus(input);
-  expect(queryByRole('listbox')).not.toHaveStyle('height: 1px');
-
-  fireEvent.keyDown(input, { key: 'Tab' });
-  expect(queryByRole('listbox')).toHaveStyle('height: 1px');
-});
-
 test('home should select first select item', () => {
   const { getAllByRole, getAllByLabelText } = render(SelectMock);
   const input = getAllByLabelText('Countries')[0];
@@ -296,17 +297,6 @@ test('enter should trigger onItemChange', () => {
   expect(onItemChange).toHaveBeenCalledWith('us');
 });
 
-test('space should trigger onItemChange', () => {
-  const { getAllByLabelText } = render(SelectMock);
-  const input = getAllByLabelText('Countries')[0];
-
-  fireEvent.focus(input);
-  fireEvent.keyDown(input, { key: 'ArrowDown' });
-  fireEvent.keyDown(input, { key: 'ArrowDown' });
-  fireEvent.keyDown(input, { key: ' ' });
-  expect(onItemChange).toHaveBeenCalledWith('mx');
-});
-
 test('clicking on select options should trigger onItemClick', () => {
   const { getAllByRole, getAllByLabelText } = render(SelectMock);
   const input = getAllByLabelText('Countries')[0];
@@ -598,3 +588,57 @@ test('select input text should update if a matching child appears', () => {
 
   expect(input.getAttribute('value')).toEqual('Mexico');
 });
+
+test('multiselect should render four items with checkboxes', () => {
+  const { getByRole } = render(MultiselectMock);
+
+  const menu = getByRole('listbox');
+
+  const options = menu.querySelectorAll('input[type="checkbox"]');
+
+  expect(options.length).toEqual(4);
+});
+
+test('multiselect should have two selected options', () => {
+  const { getByRole } = render(MultiselectMock);
+
+  const menu = getByRole('listbox');
+
+  const options = menu.querySelectorAll(':checked');
+
+  expect(options.length).toEqual(2);
+});
+
+test('multiselect should be able to select multiple options', () => {
+  const { getAllByLabelText } = render(MultiselectMock);
+
+  const input = getAllByLabelText('Countries')[0];
+
+  fireEvent.focus(input);
+  fireEvent.keyDown(input, { key: 'ArrowDown' });
+  fireEvent.keyDown(input, { key: 'ArrowDown' });
+  fireEvent.keyDown(input, { key: 'ArrowDown' });
+  fireEvent.keyDown(input, { key: 'Enter' });
+
+  expect(onItemChange).toHaveBeenCalledWith(['us', 'mx', 'ca']);
+});
+
+test('multiselect should be able to deselect options', () => {
+  const { getAllByLabelText } = render(MultiselectMock);
+
+  const input = getAllByLabelText('Countries')[0];
+
+  fireEvent.focus(input);
+  fireEvent.keyDown(input, { key: 'ArrowDown' });
+  fireEvent.keyDown(input, { key: 'Enter' });
+
+  expect(onItemChange).toHaveBeenCalledWith(['mx']);
+});
+
+test('chips should be rendered', () => {
+  const { getAllByText } = render(MultiselectMock);
+
+  expect(getAllByText('United States').length).toEqual(2);
+  expect(getAllByText('Mexico').length).toEqual(2);
+  expect(getAllByText('Canada').length).not.toEqual(2);
+});
diff --git a/packages/big-design/src/components/Select/styled.tsx b/packages/big-design/src/components/Select/styled.tsx
index fa571b301..1755c073c 100644
--- a/packages/big-design/src/components/Select/styled.tsx
+++ b/packages/big-design/src/components/Select/styled.tsx
@@ -1,6 +1,9 @@
 import { ArrowDropDownIcon } from '@bigcommerce/big-design-icons';
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import { hideVisually } from 'polished';
-import styled from 'styled-components';
+import styled, { DefaultTheme, StyledComponent } from 'styled-components';
+
+import { StyledInput } from '../Input/styled';
 
 export const StyledStatusMessage = styled.div`
   ${hideVisually()}
@@ -11,3 +14,11 @@ export const StyledDropdownIcon = styled(ArrowDropDownIcon)`
     cursor: pointer;
   }
 `;
+
+export const Test = styled(StyledInput).attrs({
+  as: 'div',
+})`
+  display: flex;
+` as StyledComponent<'div', DefaultTheme>;
+
+Test.defaultProps = { theme: defaultTheme };
diff --git a/packages/docs/PropTables/SelectPropTable.tsx b/packages/docs/PropTables/SelectPropTable.tsx
index c7c072a5a..a26f37eab 100644
--- a/packages/docs/PropTables/SelectPropTable.tsx
+++ b/packages/docs/PropTables/SelectPropTable.tsx
@@ -48,6 +48,9 @@ export const SelectPropTable: React.FC = () => (
     <PropTable.Prop name="value" types="string | string[] | number">
       Modifies the current selected value of the field.
     </PropTable.Prop>
+    <PropTable.Prop name="multi" types="boolean">
+      Renders a multiselect component.
+    </PropTable.Prop>
     <PropTable.Prop name="onActionClick" types="(string) => void">
       Callback called with the typed text of the field.
     </PropTable.Prop>
diff --git a/packages/docs/pages/Select/SelectPage.tsx b/packages/docs/pages/Select/SelectPage.tsx
index 244b58556..63f9028e0 100644
--- a/packages/docs/pages/Select/SelectPage.tsx
+++ b/packages/docs/pages/Select/SelectPage.tsx
@@ -70,6 +70,49 @@ export default () => (
 
     <SelectOptionPropTable />
 
+    <H1>Multiselect</H1>
+
+    <Text>
+      Select has the ability to render a list of items as multiselectable. Select will return an <Code>array</Code> of
+      the select options.
+    </Text>
+
+    <CodePreview>
+      {/* jsx-to-string:start */}
+      {function Example() {
+        // const [value, setValue] = React.useState(['tx', 'ca']);
+        const [value, setValue] = React.useState('ca');
+        const handleChange = val => setValue(val);
+
+        return (
+          <Form.Group>
+            <Select
+              error={value.length > 0 ? undefined : 'You must choose at least a state'}
+              label="States"
+              maxHeight={300}
+              multi={true}
+              onActionClick={inputText => inputText}
+              onItemChange={handleChange}
+              placeholder={'Choose states'}
+              placement={'bottom-start'}
+              required
+              value={value}
+            >
+              <Select.Option value="tx">Texas</Select.Option>
+              <Select.Option value="ca">California</Select.Option>
+              <Select.Option value="or">Oregon</Select.Option>
+              <Select.Option value="ar">Arkansas</Select.Option>
+              <Select.Option value="nv" disabled>
+                Nevada
+              </Select.Option>
+              <Select.Action>Action</Select.Action>
+            </Select>
+          </Form.Group>
+        );
+      }}
+      {/* jsx-to-string:end */}
+    </CodePreview>
+
     <H1>Position</H1>
 
     <Text>