Select

This component is currently in a Beta Release.
Although the component is available and supported, there is a chance there may be breaking changes that are not released as such. 
import Select from '@concur/nui-widgets-lab/lib/Select/Select';

The Select component is used to gather input from a user. It is similar in functionality to a <select> element. Best practice is to use this component as a child of FormGroup. It’s based on the Fundamental React Select component. We recommend preparing to migrate to the Select component from the current Dropdown component as part of the effort to migrate to the SAP Fiori design language.

Examples

Sizes

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

const options = [
    { key: 'item1', text: 'List Item 1' },
    { key: 'item2', text: 'List Item 2' },
    { key: 'item3', text: 'List Item 3' },
    { key: 'item4', text: 'List Item 4' }
];

const HIGSelectEx01 = () => (
    <Row>
        <Col
            md={3}
            sm={4}
            xs={6}>
            <FormGroup>
                <ControlLabel>Select Label</ControlLabel>
                <Select
                    options={options}
                    placeholder='Large Select' />
            </FormGroup>
        </Col>
        <Col
            md={3}
            sm={4}
            xs={6}>
            <FormGroup size='md'>
                <ControlLabel>Select Label</ControlLabel>
                <Select
                    options={options}
                    placeholder='Medium Select' />
            </FormGroup>
        </Col>
        <Col
            md={3}
            sm={4}
            xs={6}>
            <FormGroup size='sm'>
                <ControlLabel>Select Label</ControlLabel>
                <Select
                    options={options}
                    placeholder='Small Select' />
            </FormGroup>
        </Col>
    </Row>
);

Disabled State

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

const options = [
    { key: 'item1', text: 'List Item 1' },
    { key: 'item2', text: 'List Item 2' },
    { key: 'item3', text: 'List Item 3' },
    { key: 'item4', text: 'List Item 4' }
];

const HIGSelectEx02 = () => (
    <Row>
        <Col
            md={3}
            sm={4}
            xs={6}>
            <FormGroup>
                <ControlLabel>Select Label</ControlLabel>
                <Select
                    disabled
                    options={options}
                    placeholder='Disabled Select' />
            </FormGroup>
        </Col>
    </Row>
);

ReadOnly State

Use the readOnly property to set a Select to read-only mode. A read-only element is focusable but un-clickable.

const options = [
    { key: 'item1', text: 'List Item 1' },
    { key: 'item2', text: 'List Item 2' },
    { key: 'item3', text: 'List Item 3' },
    { key: 'item4', text: 'List Item 4' }
];

const HIGSelectEx03 = () => (
    <Row>
        <Col
            md={3}
            sm={4}
            xs={6}>
            <FormGroup>
                <ControlLabel>Select Label</ControlLabel>
                <Select
                    options={options}
                    placeholder='Readonly Select'
                    readOnly
                    selectedKey={'item1'} />
            </FormGroup>
        </Col>
    </Row>
);

Empty Option

Use the includeEmptyOption property to include an empty option for when no option is selected. Be sure to also provide an emptyAriaLabel for assistive technologies.

const options = [
    { key: 'item1', text: 'List Item 1' },
    { key: 'item2', text: 'List Item 2' },
    { key: 'item3', text: 'List Item 3' },
    { key: 'item4', text: 'List Item 4' }
];

const HIGSelectEx04 = () => (
    <Row>
        <Col
            md={3}
            sm={4}
            xs={6}>
            <FormGroup>
                <ControlLabel>Select Label</ControlLabel>
                <Select
                    emptyAriaLabel='No option selected'
                    includeEmptyOption
                    options={options} />
            </FormGroup>
        </Col>
    </Row>
);

Validation States

const options = [
    { key: 'item1', text: 'List Item 1' },
    { key: 'item2', text: 'List Item 2' },
    { key: 'item3', text: 'List Item 3' },
    { key: 'item4', text: 'List Item 4' },
];

const HIGSelectEx05 = () => (
    <div>
        <Row>
            <Col
                md={6}
                sm={6}
                xs={6}
            >
                <FormGroup validationMessage={{ state: 'error', text: 'Test validation message' }}>
                    <ControlLabel>Select Label</ControlLabel>
                    <Select
                        options={options}
                        placeholder="Select"
                    />
                </FormGroup>
            </Col>
            <Col
                md={6}
                sm={6}
                xs={6}
            >
                <FormGroup validationMessage={{ state: 'warning', text: 'Test validation message' }}>
                    <ControlLabel>Select Label</ControlLabel>
                    <Select
                        options={options}
                        placeholder="Select"
                    />
                </FormGroup>
            </Col>
        </Row>
    </div>
);

Usage

Properties

Property Type Default Description
className String   Any custom classes to add to the element.
controlClassName String   Any custom classes to add to the control wrapping <div> element.
disabled Boolean false Controls whether the component is enabled or disabled.
emptyAriaLabel String Required if includeEmptyOption is true Localized screen reader label for an empty option if included, or if no placeholder is included.
id String   Sets the id attribute on the element.
includeEmptyOption Boolean   Set to true to include an empty option. If true, also provide an emptyAriaLabel.
listClassName String   Any custom classes to add to the option list element.
listItemClassName String   Any custom classes to add to add to the list item elements.
listItemTextClassName String   Any custom classes to add to the list item child <span> elements.
options Array [] An array of objects with a key and text to render the selectable options. [{ key: string, text: string }]
placeholder String   Localized placeholder text of the input.
popoverProps Object   Properties to pass through to the popover.
readOnly Boolean false Controls whether the component is read-only.
required Boolean false Adds the required attribute to the element. NOTE: This does not perform any validation, but rather just marks the field as required.
selectedKey String   The key corresponding to the option to be selected on page load.
size String 'lg' Size of the element. Options are 'lg', 'md', 'sm'.
triggerClassName String   Any custom classes to add to the trigger <span> element.
validationOverlayProps Object   Contains all the props to pass to the ValidationOverlay component. See validationOverlayProps for details.
validationMessage Object   An object identifying a validation message. The object will include properties for state and text; e.g., { state: 'warning', text: 'This is your last warning' }.

Callbacks

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

validationOverlayProps

Property Parameters Description
className String Any custom classes to add to validation popover’s outermost <div> element.
formMessageProps Object Additional props to be spread to the ValidationOverlay’s FormMessage component.
popperClassName String Any custom classes to add to validation popover’s popper <div> element.
referenceClassName String Any custom classes to add to ValidationOverlay’s reference <div> element
wrapperProps Object Additional props to be spread to the popover’s outermost <div> element.