Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
201 lines (166 sloc) 6.06 KB

import Example from '../../components/example'; import API from '../../components/api'; import Layout from '../../components/layout';

import SelectUncontrolled from 'examples/select/uncontrolled.js'; import SelectSizes from 'examples/select/sizes.js'; import SelectControlled from 'examples/select/controlled.js'; import SelectOpen from 'examples/select/open.js'; import SelectOverridden from 'examples/select/overridden.js'; import SelectLabel from 'examples/select/label.js'; import SelectInModal from 'examples/select/in-modal.js'; import SelectNative from 'examples/select/native.js'; import SelectSinglePickSearch from 'examples/select/search-single-pick.js'; import SelectMultiPickSearch from 'examples/select/search-multi-pick.js'; import SelectWithManyOptions from 'examples/select/with-many-options.js'; import SelectCreatable from 'examples/select/creatable.js'; import SelectCreatableMulti from 'examples/select/creatable-multi.js'; import SelectOverriddenDropdown from 'examples/select/overridden-dropdown.js';

import Overrides from '../../components/overrides'; import {StatefulSelect, TYPE} from 'baseui/select'; import * as SelectExports from 'baseui/select'; import {Block} from 'baseui/block';

export default Layout;

Select

The select and search controls allow the user to select an option or options.

Select menus in Base hover atop of a selection menu while providing a simple list of options. Proper spacing, color, and a check-mark are clear indicators of a selection. Each menu is scrollable, if applicable.

Examples

Things to note in the example source code:

  • the value is always an Array to provide a consistent interface - no matter if you use multi or single selects,
  • you have to call setState with the entire object, not just the id value.

<Example title="Select as single-pick search" path="select/search-single-pick.js"

When type is 'search' a magnifying glass icon will be rendered to the input's left and a dropdown arrow will not be rendered to the right.

The creatable select enables users to create new options along with choosing existing options.

<Example title="Select with many options" path="select/with-many-options.js" additionalPackages={{'react-virtualized': '^9.21.0'}}

Use startOpen to mount the Select with an open dropdown. Combine this with autoFocus if you want the input to be focused as well. Note, the dropdown will close once an item is selected or if the escape key is pressed while the Select has focus. If you want the dropdown to stay open you might be better off using Menu directly.

To override the Popover that's being used by the Dropdown subcomponent, you have to use a nested override.

Overrides

<Overrides name="Select" component={SelectExports} whitelisted={[ 'Root', 'ControlContainer', 'Placeholder', 'ValueContainer', 'SingleValue', 'MultiValue', 'InputContainer', 'Input', 'IconsContainer', 'SelectArrow', 'ClearIcon', 'LoadingIndicator', 'SearchIcon', 'Popover', 'DropdownContainer', 'Dropdown', 'DropdownOption', 'DropdownListItem', 'OptionContent', 'StatefulMenu', ]} renderExample={props => ( <React.Fragment> <StatefulSelect overrides={props.overrides} options={[ {id: 'AliceBlue', color: '#F0F8FF'}, {id: 'AntiqueWhite', color: '#FAEBD7'}, {id: 'Aqua', color: '#00FFFF'}, {id: 'Aquamarine', color: '#7FFFD4'}, {id: 'Azure', color: '#F0FFFF'}, {id: 'Beige', color: '#F5F5DC'}, ]} labelKey="id" valueKey="color" multi type={TYPE.search} onChange={event => console.log(event)} /> <StatefulSelect overrides={props.overrides} options={[ {id: 'AliceBlue', color: '#F0F8FF'}, {id: 'AntiqueWhite', color: '#FAEBD7'}, {id: 'Aqua', color: '#00FFFF'}, {id: 'Aquamarine', color: '#7FFFD4'}, {id: 'Azure', color: '#F0FFFF'}, {id: 'Beige', color: '#F5F5DC'}, ]} labelKey="id" valueKey="color" onChange={event => console.log(event)} /> </React.Fragment> )} />

API

<API heading="Select API" api={require('!!@uber-web-ui/extract-react-types-loader!../../../src/select/select.js')} />

<API heading="StatefulSelectContainer API" api={require('!!@uber-web-ui/extract-react-types-loader!../../../src/select/stateful-select-container.js')} />

You can’t perform that action at this time.