React Select Group options Example

Enable group headers through the group property of the options or the optgroup of the native select.

Grouping works for both single and multiple select pickers.

Group headers with single select

                        const myData = [
    { text: 'Atlanta', group: 'US', value: 'atl' },
    { text: 'Boston', group: 'US', value: 'bos' },
    { text: 'Bath', group: 'UK', value: 'bat' },
    { text: 'Bristol', group: 'UK', value: 'bri' },
];

<Select
    data={myData}
    touchUi=
/>
                    

Single select

Render a group wheel

Javascript jQuery Angular React Vue

                        const myData = [
    { text: 'Atlanta', group: 'US', value: 'atl' },
    { text: 'Boston', group: 'US', value: 'bos' },
    { text: 'Bath', group: 'UK', value: 'bat' },
    { text: 'Bristol', group: 'UK', value: 'bri' },
    { text: 'Berlin', group: 'DE', value: 'ber' },
    { text: 'Duisburg', group: 'DE', value: 'dus' },
    { text: 'Cologne', group: 'DE', value: 'col' },
    { text: 'Paris', group: 'FR', value: 'par' },
    { text: 'Lyon', group: 'FR', value: 'lyo' },
];

<Select
    showGroupWheel={true}
    data={myData}
    touchUi=
/>
                    

Group wheel

Group headers with multiple select

Javascript jQuery Angular React Vue

                        const myData = [
    { text: 'Camera & Photo', group: 'Electronics', value: 1 },
    { text: 'Cell Phones & Accessories', group: 'Electronics', value: 2 },
    { text: 'GPS & Navigation', group: 'Electronics', value: 3 },
    { text: 'Plugs and Outlets', group: 'Smart Home', value: 4 },
    { text: 'Heating and Cooling', group: 'Smart Home', value: 5 },
    { text: 'Detectors and Sensors', group: 'Smart Home', value: 6 },
];

<Select
    data={myData}
    touchUi=
/>
                    

Multi-select

Preview in fullscreen