NUI-Widgets documentation has moved to Storybook hosted on Github Pages.

Dropdown

This component is currently in maintenance mode.
  • The underlying implementation of this component is scheduled to be overhauled to meet more rigorous accessibility and design guidelines.
  • A replacement has been made available .
import Dropdown from '@concur/nui-widgets/lib/Forms/Dropdown';

The Dropdown component is used to used to gather input from a user. It emits a <select> tag to create a dropdown list. Best practice is to use this component as a child of FormGroup.

Examples

Sizes

Three sizes are supported: 'lg' (default), 'md' and 'sm'. Use the size property to set the size.

<FormGroup>
    <ControlLabel>Large</ControlLabel>
    <Dropdown>
        <Dropdown.Option value='dropdown'>Dropdown</Dropdown.Option>
        <Dropdown.Option value='other'>...</Dropdown.Option>
    </Dropdown>
</FormGroup>
<FormGroup
    size='md'>
    <ControlLabel>Medium</ControlLabel>
    <Dropdown>
        <Dropdown.Option value='dropdown'>Dropdown</Dropdown.Option>
        <Dropdown.Option value='other'>...</Dropdown.Option>
    </Dropdown>
</FormGroup>
<FormGroup
    size='sm'>
    <ControlLabel>Small</ControlLabel>
    <Dropdown>
        <Dropdown.Option value='dropdown'>Dropdown</Dropdown.Option>
        <Dropdown.Option value='other'>...</Dropdown.Option>
    </Dropdown>
</FormGroup>

Disabled State

Use the disabled property to disable a dropdown. A disabled element is unusable and un-clickable.

<FormGroup>
      <ControlLabel>Dropdown Label</ControlLabel>
      <Dropdown disabled>
          <Dropdown.Option value='dropdown'>Dropdown</Dropdown.Option>
          <Dropdown.Option value='other'>...</Dropdown.Option>
      </Dropdown>
  </FormGroup>

ReadOnly State

ReadOnly is not a supported state for the Dropdown component.

Usage

Properties

Property Type Default Description
className String   Any custom classes to add to the <select> element.
disabled Boolean false Controls whether the component is enabled or disabled.
id String   Sets the id attribute on the <select> element. If used within a FormGroup, the controlId property will be used. This property overrides that.
listSize Number 1 Number of visible <Dropdown.Option> items. If used with multiple, default will be 4.
multiple Boolean false When true, multiple options can be selected at once.
required Boolean false Adds the required attribute to the <select> element. NOTE: This does not perform any validation, but rather just marks the field as required.
size String 'lg' Size of the <select> element. Options are 'lg', 'md', 'sm'.
validationMessageState String   If used in conjunction with field validation, this provides the icon next to the label. Options are 'error', 'warning'.

Callbacks

Property Parameters Description
onBlur event Callback function for onBlur events.
onChange event Callback function fired when option is selected.
onFocus event Callback function for onFocus events.

Properties

Property Type Default Description
children String   Display text.
disabled Boolean false Controls whether the component is enabled or disabled.
selected Boolean false When true, the option is pre-selected when the page loads.
value String   Controls the value.