Prop	Type	Default	Notes
variant	Number	0	Invoked with an array of updatedSelections when one or more option(s) is selected by the user
onChange	Function	0	One of 0 (with border) or 1 (without border)
value	Array	N/A	Specifies array of initial string values
valueOverride	Array	null	Specifies array of string values that override internal state
label	String	N/A	Visible with selected option.
placeholder	String	N/A	Visible instead of selected option. Overrides label. Supported in both variants.
isOpen	Boolean	false	Used to override internal isOpen state.
keywordSearch	Boolean	true	Used to override ability to use keyboard to focus on drop down option.
withKeyboardProvider	Boolean	true	Used to override inclusion of a KeyboardProvider to handle keydown events.
shouldOpenDownward	Boolean	true	Used to ensure that the DropDownGroup always opens downward.
size	String	'large'	Defines size. Can be `small` or `large`
icon	Node	null	Used to show an icon before text inside DropDown button.

DropDownOption:

Prop	Type	Default	Notes
value	String	N/A	Option value. Required.
index	Nymber	N/A	Option index. Required.
className	String	N/A	Class name passed to StyledDropDownItem.
onClick	Function	null	Invoked with the synthetic event object when the DropDownOption is clicked
...props	any	N/A	Passes through any other props to underlying DropDownInput

36px Height - Primary

Default

Disabled

Code

<div>
  Default
  <DropDownGroup
    placeholder='Item 1'
    size='small'
    value={["0"]}
  >
    <DropDownOption
      index={0}
      value='0'
    >
      Item 1
    </DropDownOption>
    <DropDownOption
      index={1}
      value='1'
    >
      Item 2
    </DropDownOption>
  </DropDownGroup>
  Disabled
  <DropDownGroup
    disabled
    placeholder='Item 1'
    size='small'
  >
    <DropDownOption
      index={0}
      value='0'
    >
      Option One One One One
    </DropDownOption>
    <DropDownOption
      index={1}
      value='1'
    >
      Option Two
    </DropDownOption>
  </DropDownGroup>
</div>

44px Height - Primary

Default

Disabled

Code

<div>
  Default
  <DropDownGroup
    placeholder='Item 1'
    value={["0"]}
  >
    <DropDownOption
      index={0}
      value='0'
    >
      Item 1
    </DropDownOption>
    <DropDownOption
      index={1}
      value='1'
    >
      Item 2
    </DropDownOption>
  </DropDownGroup>
  Disabled
  <DropDownGroup
    disabled
    placeholder='Item 1'
  >
    <DropDownOption
      index={0}
      value='0'
    >
      Item 1
    </DropDownOption>
    <DropDownOption
      index={1}
      value='1'
    >
      Item 2
    </DropDownOption>
  </DropDownGroup>
</div>

36px Height - Secondary

Default

Disabled

Code

<div>
  Default
  <DropDownGroup
    placeholder='Item 1'
    size='small'
    value={["0"]}
    variant={1}
  >
    <DropDownOption
      index={0}
      value='0'
    >
      Item 1
    </DropDownOption>
    <DropDownOption
      index={1}
      value='1'
    >
      Item 2
    </DropDownOption>
  </DropDownGroup>
  Disabled
  <DropDownGroup
    disabled
    placeholder='Item 1'
    size='small'
    variant={1}
  >
    <DropDownOption
      index={0}
      value='0'
    >
      Item 1
    </DropDownOption>
    <DropDownOption
      index={1}
      value='1'
    >
      Item 2
    </DropDownOption>
  </DropDownGroup>
</div>

44px Height - Secondary

Default

Disabled

Code

<div>
  Default
  <DropDownGroup
    placeholder='Item 1'
    value={["0"]}
    variant={1}
  >
    <DropDownOption
      index={0}
      value='0'
    >
      Item 1
    </DropDownOption>
    <DropDownOption
      index={1}
      value='1'
    >
      Item 2
    </DropDownOption>
  </DropDownGroup>
  Disabled
  <DropDownGroup
    disabled
    placeholder='Item 1'
    variant={1}
  >
    <DropDownOption
      index={0}
      value='0'
    >
      Item 1
    </DropDownOption>
    <DropDownOption
      index={1}
      value='1'
    >
      Item 2
    </DropDownOption>
  </DropDownGroup>
</div>

Helpful Links

Portfolio

Partners