Select

A versatile select component supporting single and multi-select modes, search filtering, option creation, and both synchronous and asynchronous data sources.

Live Example

Loading component...

Try It

Edit the code below to experiment with the component:

Live Editor

function Demo() {
  return (
    <div style={{ width: 300 }}>
      <Select
        ariaLabel="demo-select"
        options={[
          { label: 'Dashboards', value: 'dashboards' },
          { label: 'Charts', value: 'charts' },
          { label: 'Datasets', value: 'datasets' },
          { label: 'SQL Lab', value: 'sqllab' },
          { label: 'Settings', value: 'settings' },
        ]}
        placeholder="Select ..."
        showSearch
      />
    </div>
  );
}

Result

Loading...

Multi Select

Live Editor

function MultiSelectDemo() {
  return (
    <div style={{ width: 400 }}>
      <Select
        ariaLabel="multi-select"
        mode="multiple"
        options={[
          { label: 'Dashboards', value: 'dashboards' },
          { label: 'Charts', value: 'charts' },
          { label: 'Datasets', value: 'datasets' },
          { label: 'SQL Lab', value: 'sqllab' },
          { label: 'Settings', value: 'settings' },
        ]}
        placeholder="Select items..."
        allowSelectAll
        maxTagCount={3}
      />
    </div>
  );
}

Result

Loading...

Allow New Options

Live Editor

function AllowNewDemo() {
  return (
    <div style={{ width: 300 }}>
      <Select
        ariaLabel="allow-new-select"
        mode="multiple"
        options={[
          { label: 'Red', value: 'red' },
          { label: 'Green', value: 'green' },
          { label: 'Blue', value: 'blue' },
        ]}
        placeholder="Type to add tags..."
        allowNewOptions
        showSearch
      />
    </div>
  );
}

Result

Loading...

Inverted Selection

Live Editor

function InvertedDemo() {
  return (
    <div style={{ width: 400 }}>
      <Select
        ariaLabel="inverted-select"
        mode="multiple"
        options={[
          { label: 'Admin', value: 'admin' },
          { label: 'Editor', value: 'editor' },
          { label: 'Viewer', value: 'viewer' },
          { label: 'Public', value: 'public' },
        ]}
        placeholder="Exclude roles..."
        invertSelection
      />
    </div>
  );
}

Result

Loading...

One Line Mode

Live Editor

function OneLineDemo() {
  return (
    <div style={{ width: 300 }}>
      <Select
        ariaLabel="oneline-select"
        mode="multiple"
        options={[
          { label: 'Dashboard 1', value: 'd1' },
          { label: 'Dashboard 2', value: 'd2' },
          { label: 'Dashboard 3', value: 'd3' },
          { label: 'Dashboard 4', value: 'd4' },
          { label: 'Dashboard 5', value: 'd5' },
        ]}
        placeholder="Select dashboards..."
        oneLine
      />
    </div>
  );
}

Result

Loading...

Props

Prop	Type	Default	Description
mode	string	"single"	Whether to allow selection of a single option or multiple.
placeholder	string	"Select ..."	Placeholder text when no option is selected.
showSearch	boolean	true	Whether to show a search input for filtering.
allowNewOptions	boolean	false	Whether users can create new options by typing a value not in the list.
allowClear	boolean	false	Whether to show a clear button to reset the selection.
allowSelectAll	boolean	true	Whether to show a "Select All" option in multiple mode.
disabled	boolean	false	Whether the select is disabled.
invertSelection	boolean	false	Shows a stop icon instead of a checkmark on selected options, indicating deselection on click.
oneLine	boolean	false	Forces tags onto one line with overflow count. Requires multiple mode.
maxTagCount	number	4	Maximum number of tags to display in multiple mode before showing an overflow count.
options	any	[{"label":"Such an incredibly awesome long long label","value":"long-label-1"},{"label":"Another incredibly awesome long long label","value":"long-label-2"},{"label":"Option A","value":"A"},{"label":"Option B","value":"B"},{"label":"Option C","value":"C"},{"label":"Option D","value":"D"},{"label":"Option E","value":"E"},{"label":"Option F","value":"F"},{"label":"Option G","value":"G"},{"label":"Option H","value":"H"},{"label":"Option I","value":"I"}]	-

Import

import { Select } from '@superset/components';

---

Improve this page

This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file.