import { StoryWithControls } from '../../../src/components/StorybookWrapper';

Select

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

Live Example

<StoryWithControls component="Select" props={{ mode: "single", placeholder: "Select ...", showSearch: true, allowNewOptions: false, allowClear: false, allowSelectAll: true, disabled: false, invertSelection: false, oneLine: false, maxTagCount: 4, options: [ { 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" } ] }} controls={[ { name: "mode", label: "Mode", type: "inline-radio", options: [ "single", "multiple" ], description: "Whether to allow selection of a single option or multiple." }, { name: "placeholder", label: "Placeholder", type: "text", description: "Placeholder text when no option is selected." }, { name: "showSearch", label: "Show Search", type: "boolean", description: "Whether to show a search input for filtering." }, { name: "allowNewOptions", label: "Allow New Options", type: "boolean", description: "Whether users can create new options by typing a value not in the list." }, { name: "allowClear", label: "Allow Clear", type: "boolean", description: "Whether to show a clear button to reset the selection." }, { name: "allowSelectAll", label: "Allow Select All", type: "boolean", description: "Whether to show a "Select All" option in multiple mode." }, { name: "disabled", label: "Disabled", type: "boolean", description: "Whether the select is disabled." }, { name: "invertSelection", label: "Invert Selection", type: "boolean", description: "Shows a stop icon instead of a checkmark on selected options, indicating deselection on click." }, { name: "oneLine", label: "One Line", type: "boolean", description: "Forces tags onto one line with overflow count. Requires multiple mode." }, { name: "maxTagCount", label: "Max Tag Count", type: "number", description: "Maximum number of tags to display in multiple mode before showing an overflow count." } ]} />

Try It

Edit the code below to experiment with the component:

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>
  );
}

Multi Select

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>
  );
}

Allow New Options

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>
  );
}

Inverted Selection

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>
  );
}

One Line Mode

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>
  );
}

Props

Import

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

:::tip[Improve this page] This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file. :::