Select

boolean | undefined

multiple

boolean | undefined

options

GroupedListOption[] | ListOption[]

required

value

GroupedFlatListItem | GroupedFlatListItem[] | ListOption | ListOption[] | undefined

onChange

((event: SyntheticEvent<HTMLElement, Event>, item: ListOption) => void) | ((event: SyntheticEvent<HTMLElement, Event>, items: ListOption) => void) | ((event: SyntheticEvent<HTMLElement, Event>, item: GroupedFlatListItem) => void) | ((event: SyntheticEvent<...>, item: GroupedFlatListItem) => void) | undefined

className

string | undefined

disabled

boolean | undefined

error

string | undefined

placeholder

string | undefined

loadingPlaceholder

string | undefined

multipleText

string | undefined

fluid

boolean | undefined

style

CSSProperties | undefined

icon

"string" | undefined

onChangeSelectedItems

((items: ListOption[]) => void) | ((items: GroupedFlatListItem[]) => void) | undefined

grouped

true

required

noOptionsTitle

string | undefined

Select(List, единичный выбор)

() => {
  const options = [
    {
      id: 0,
      header: 'Яблоко сочное, как арбуз',
      icon: 'tag-icon',
    },
    {
      id: 1,
      header: 'Персик',
      icon: 'babai-icon',
    },
    {
      id: 2,
      header: 'Банан',
      icon: 'tag-icon',
    },
    {
      id: 3,
      header: 'Слива',
      icon: 'paint-icon',
    },
    {
      id: 4,
      header: 'Вишня',
      icon: 'tag-icon',
    },
    {
      id: 5,
      header: 'Апельсин',
      icon: 'bell-icon',
    },
  ]
  const [value1, setValue1] = useState(null)
  const [value2, setValue2] = useState(options[0])
  return (
    <div className="docz-space-between">
      <Select
        search
        icon="boolean-icon"
        style={{ width: 200 }}
        options={options}
        value={value1}
        onChange={(event, item) => {
          console.log('onChange:', event, item)
          setValue1(item)
        }}
        placeholder="Выберите"
        loadingPlaceholder="Загрузка..."
      />
      <Select
        style={{ width: 200 }}
        options={options}
        value={value2}
        onChange={(event, item) => {
          console.log('onChange:', event, item)
          setValue2(item)
        }}
        placeholder="Выберите"
        loadingPlaceholder="Загрузка..."
      />
      <Select
        error="Error"
        style={{ width: 200 }}
        options={options}
        value={value2}
        onChange={(event, item) => {
          console.log('onChange:', event, item)
          setValue2(item)
        }}
        placeholder="Выберите"
        loadingPlaceholder="Загрузка..."
      />
    </div>
  )
}

() => {
  const options = [
    {
      id: 0,
      header: 'Яблоко сочное, как арбуз',
      icon: 'tag-icon',
    },
    {
      id: 1,
      header: 'Персик',
      icon: 'babai-icon',
    },
    {
      id: 2,
      header: 'Банан',
      icon: 'tag-icon',
    },
    {
      id: 3,
      header: 'Слива',
      icon: 'paint-icon',
    },
    {
      id: 4,
      header: 'Вишня',
      icon: 'tag-icon',
    },
    {
      id: 5,
      header: 'Апельсин',
      icon: 'bell-icon',
    },
  ]
  const [value1, setValue1] = useState(null)
  const [value2, setValue2] = useState(options[0])
  return (
    <div className="docz-space-between">
      <Select
        search
        icon="boolean-icon"
        style={{ width: 200 }}
        options={options}
        value={value1}
        onChange={(event, item) => {
          console.log('onChange:', event, item)
          setValue1(item)
        }}
        placeholder="Выберите"
        loadingPlaceholder="Загрузка..."
      />
      <Select
        style={{ width: 200 }}
        options={options}
        value={value2}
        onChange={(event, item) => {
          console.log('onChange:', event, item)
          setValue2(item)
        }}
        placeholder="Выберите"
        loadingPlaceholder="Загрузка..."
      />
      <Select
        error="Error"
        style={{ width: 200 }}
        options={options}
        value={value2}
        onChange={(event, item) => {
          console.log('onChange:', event, item)
          setValue2(item)
        }}
        placeholder="Выберите"
        loadingPlaceholder="Загрузка..."
      />
    </div>
  )
}

Select(List, множественный выбор)

() => {
  const options = [
    {
      id: 0,
      header: 'Яблоко сочное, как арбуз',
      icon: 'tag-icon',
    },
    {
      id: 1,
      header: 'Персик',
      icon: 'babai-icon',
    },
    {
      id: 2,
      header: 'Банан',
      icon: 'tag-icon',
    },
    {
      id: 3,
      header: 'Слива',
      icon: 'paint-icon',
    },
    {
      id: 4,
      header: 'Вишня',
      icon: 'tag-icon',
    },
    {
      id: 5,
      header: 'Апельсин',
      icon: 'bell-icon',
    },
  ]
  const [value1, setValue1] = useState([])
  const [value2, setValue2] = useState([options[0], options[1]])
  return (
    <div className="docz-space-between">
      <Select
        style={{ width: 200 }}
        multiple
        options={options}
        value={value1}
        onChange={(event, item) => {
          console.log('onChange:', event, item)
        }}
        onChangeSelectedItems={items => {
          console.log('onChangeSelectedItems', items)
          setValue1(items)
        }}
        placeholder="Выберите"
        loadingPlaceholder="Загрузка..."
        multipleText="Выбрано: "
      />
      <Select
        style={{ width: 200 }}
        multiple
        options={options}
        value={value2}
        onChange={(event, item) => {
          console.log('onChange:', event, item)
        }}
        onChangeSelectedItems={items => {
          console.log('onChangeSelectedItems', items)
          setValue2(items)
        }}
        placeholder="Выберите"
        loadingPlaceholder="Загрузка..."
        multipleText="Выбрано: "
      />
    </div>
  )
}

() => {
  const options = [
    {
      id: 0,
      header: 'Яблоко сочное, как арбуз',
      icon: 'tag-icon',
    },
    {
      id: 1,
      header: 'Персик',
      icon: 'babai-icon',
    },
    {
      id: 2,
      header: 'Банан',
      icon: 'tag-icon',
    },
    {
      id: 3,
      header: 'Слива',
      icon: 'paint-icon',
    },
    {
      id: 4,
      header: 'Вишня',
      icon: 'tag-icon',
    },
    {
      id: 5,
      header: 'Апельсин',
      icon: 'bell-icon',
    },
  ]
  const [value1, setValue1] = useState([])
  const [value2, setValue2] = useState([options[0], options[1]])
  return (
    <div className="docz-space-between">
      <Select
        style={{ width: 200 }}
        multiple
        options={options}
        value={value1}
        onChange={(event, item) => {
          console.log('onChange:', event, item)
        }}
        onChangeSelectedItems={items => {
          console.log('onChangeSelectedItems', items)
          setValue1(items)
        }}
        placeholder="Выберите"
        loadingPlaceholder="Загрузка..."
        multipleText="Выбрано: "
      />
      <Select
        style={{ width: 200 }}
        multiple
        options={options}
        value={value2}
        onChange={(event, item) => {
          console.log('onChange:', event, item)
        }}
        onChangeSelectedItems={items => {
          console.log('onChangeSelectedItems', items)
          setValue2(items)
        }}
        placeholder="Выберите"
        loadingPlaceholder="Загрузка..."
        multipleText="Выбрано: "
      />
    </div>
  )
}

Select(GroupedList, единичный выбор)

() => {
  const options = [
    {
      id: 0,
      groupName: 'Статус',
      items: [
        {
          id: 0,
          header: 'Запущено',
          icon: 'play-icon',
        },
        {
          id: 1,
          header: 'Остановлено',
          icon: 'stop-icon',
        },
        {
          id: 2,
          header: 'Обновляется',
          icon: 'versa-icon',
        },
      ],
    },
    {
      id: 2,
      groupName: 'Дополнительные статусы для переноса строк',
      items: [
        {
          id: 0,
          header: 'Отключено',
          icon: 'unplug-icon',
        },
        {
          id: 1,
          header: 'Упёрлось',
          icon: 'upload-icon',
        },
        {
          id: 2,
          header: 'Смотрит влажным взглядом',
          icon: 'view-icon',
        },
        {
          id: 3,
          header: 'Подбирает гарнитуру',
          icon: 'string-icon',
        },
        {
          id: 4,
          header: 'Ожидает',
          icon: 'sandclock-icon',
        },
      ],
    },
  ]
  const [value1, setValue1] = useState(null)
  const [value2, setValue2] = useState({
    group: {
      id: 0,
      groupName: 'Статус',
      items: [
        {
          id: 0,
          header: 'Запущено',
          icon: 'play-icon',
        },
        {
          id: 1,
          header: 'Остановлено',
          icon: 'stop-icon',
        },
        {
          id: 2,
          header: 'Обновляется',
          icon: 'versa-icon',
        },
      ],
    },
    item: {
      id: 0,
      header: 'Запущено',
      icon: 'play-icon',
    },
  })
  return (
    <div className="docz-space-between">
      <Select
        style={{ width: 200 }}
        grouped
        options={options}
        value={value1}
        onChange={(event, item) => {
          console.log('onChange:', event, item)
          setValue1(item)
        }}
        placeholder="Выберите"
        loadingPlaceholder="Загрузка..."
      />
      <Select
        style={{ width: 200 }}
        grouped
        options={options}
        value={value2}
        onChange={(event, item) => {
          console.log('onChange:', event, item)
          setValue2(item)
        }}
        placeholder="Выберите"
        loadingPlaceholder="Загрузка..."
      />
    </div>
  )
}

() => {
  const options = [
    {
      id: 0,
      groupName: 'Статус',
      items: [
        {
          id: 0,
          header: 'Запущено',
          icon: 'play-icon',
        },
        {
          id: 1,
          header: 'Остановлено',
          icon: 'stop-icon',
        },
        {
          id: 2,
          header: 'Обновляется',
          icon: 'versa-icon',
        },
      ],
    },
    {
      id: 2,
      groupName: 'Дополнительные статусы для переноса строк',
      items: [
        {
          id: 0,
          header: 'Отключено',
          icon: 'unplug-icon',
        },
        {
          id: 1,
          header: 'Упёрлось',
          icon: 'upload-icon',
        },
        {
          id: 2,
          header: 'Смотрит влажным взглядом',
          icon: 'view-icon',
        },
        {
          id: 3,
          header: 'Подбирает гарнитуру',
          icon: 'string-icon',
        },
        {
          id: 4,
          header: 'Ожидает',
          icon: 'sandclock-icon',
        },
      ],
    },
  ]
  const [value1, setValue1] = useState(null)
  const [value2, setValue2] = useState({
    group: {
      id: 0,
      groupName: 'Статус',
      items: [
        {
          id: 0,
          header: 'Запущено',
          icon: 'play-icon',
        },
        {
          id: 1,
          header: 'Остановлено',
          icon: 'stop-icon',
        },
        {
          id: 2,
          header: 'Обновляется',
          icon: 'versa-icon',
        },
      ],
    },
    item: {
      id: 0,
      header: 'Запущено',
      icon: 'play-icon',
    },
  })
  return (
    <div className="docz-space-between">
      <Select
        style={{ width: 200 }}
        grouped
        options={options}
        value={value1}
        onChange={(event, item) => {
          console.log('onChange:', event, item)
          setValue1(item)
        }}
        placeholder="Выберите"
        loadingPlaceholder="Загрузка..."
      />
      <Select
        style={{ width: 200 }}
        grouped
        options={options}
        value={value2}
        onChange={(event, item) => {
          console.log('onChange:', event, item)
          setValue2(item)
        }}
        placeholder="Выберите"
        loadingPlaceholder="Загрузка..."
      />
    </div>
  )
}

Select(GroupedList, множественный выбор)

() => {
  const options = [
    {
      id: 0,
      groupName: 'Статус',
      items: [
        {
          id: 0,
          header: 'Запущено',
          icon: 'play-icon',
        },
        {
          id: 1,
          header: 'Остановлено',
          icon: 'stop-icon',
        },
        {
          id: 2,
          header: 'Обновляется',
          icon: 'versa-icon',
        },
      ],
    },
    {
      id: 2,
      groupName: 'Дополнительные статусы для переноса строк',
      items: [
        {
          id: 0,
          header: 'Отключено',
          icon: 'unplug-icon',
        },
        {
          id: 1,
          header: 'Упёрлось',
          icon: 'upload-icon',
        },
        {
          id: 2,
          header: 'Смотрит влажным взглядом',
          icon: 'view-icon',
        },
        {
          id: 3,
          header: 'Подбирает гарнитуру',
          icon: 'string-icon',
        },
        {
          id: 4,
          header: 'Ожидает',
          icon: 'sandclock-icon',
        },
      ],
    },
  ]
  const [value1, setValue1] = useState([])
  const [value2, setValue2] = useState([
    {
      group: {
        id: 0,
        groupName: 'Статус',
        items: [
          {
            id: 0,
            header: 'Запущено',
            icon: 'play-icon',
          },
          {
            id: 1,
            header: 'Остановлено',
            icon: 'stop-icon',
          },
          {
            id: 2,
            header: 'Обновляется',
            icon: 'versa-icon',
          },
        ],
      },
      item: {
        id: 0,
        header: 'Запущено',
        icon: 'play-icon',
      },
    },
    {
      group: {
        id: 0,
        groupName: 'Статус',
        items: [
          {
            id: 0,
            header: 'Запущено',
            icon: 'play-icon',
          },
          {
            id: 1,
            header: 'Остановлено',
            icon: 'stop-icon',
          },
          {
            id: 2,
            header: 'Обновляется',
            icon: 'versa-icon',
          },
        ],
      },
      item: {
        id: 1,
        header: 'Остановлено',
        icon: 'stop-icon',
      },
    },
  ])
  return (
    <div className="docz-space-between">
      <Select
        style={{ width: 200 }}
        grouped
        multiple
        options={options}
        value={value1}
        onChange={(event, item) => {
          console.log('onChange:', event, item)
        }}
        onChangeSelectedItems={items => {
          console.log('onChangeSelectedItems', items)
          setValue1(items)
        }}
        placeholder="Выберите"
        loadingPlaceholder="Загрузка..."
        multipleText="Выбрано: "
      />
      <Select
        style={{ width: 200 }}
        grouped
        multiple
        options={options}
        value={value2}
        onChange={(event, item) => console.log('onChange:', event, item)}
        onChangeSelectedItems={items => {
          console.log('onChangeSelectedItems', items)
          setValue2(items)
        }}
        placeholder="Выберите"
        loadingPlaceholder="Загрузка..."
        multipleText="Выбрано: "
      />
    </div>
  )
}

() => {
  const options = [
    {
      id: 0,
      groupName: 'Статус',
      items: [
        {
          id: 0,
          header: 'Запущено',
          icon: 'play-icon',
        },
        {
          id: 1,
          header: 'Остановлено',
          icon: 'stop-icon',
        },
        {
          id: 2,
          header: 'Обновляется',
          icon: 'versa-icon',
        },
      ],
    },
    {
      id: 2,
      groupName: 'Дополнительные статусы для переноса строк',
      items: [
        {
          id: 0,
          header: 'Отключено',
          icon: 'unplug-icon',
        },
        {
          id: 1,
          header: 'Упёрлось',
          icon: 'upload-icon',
        },
        {
          id: 2,
          header: 'Смотрит влажным взглядом',
          icon: 'view-icon',
        },
        {
          id: 3,
          header: 'Подбирает гарнитуру',
          icon: 'string-icon',
        },
        {
          id: 4,
          header: 'Ожидает',
          icon: 'sandclock-icon',
        },
      ],
    },
  ]
  const [value1, setValue1] = useState([])
  const [value2, setValue2] = useState([
    {
      group: {
        id: 0,
        groupName: 'Статус',
        items: [
          {
            id: 0,
            header: 'Запущено',
            icon: 'play-icon',
          },
          {
            id: 1,
            header: 'Остановлено',
            icon: 'stop-icon',
          },
          {
            id: 2,
            header: 'Обновляется',
            icon: 'versa-icon',
          },
        ],
      },
      item: {
        id: 0,
        header: 'Запущено',
        icon: 'play-icon',
      },
    },
    {
      group: {
        id: 0,
        groupName: 'Статус',
        items: [
          {
            id: 0,
            header: 'Запущено',
            icon: 'play-icon',
          },
          {
            id: 1,
            header: 'Остановлено',
            icon: 'stop-icon',
          },
          {
            id: 2,
            header: 'Обновляется',
            icon: 'versa-icon',
          },
        ],
      },
      item: {
        id: 1,
        header: 'Остановлено',
        icon: 'stop-icon',
      },
    },
  ])
  return (
    <div className="docz-space-between">
      <Select
        style={{ width: 200 }}
        grouped
        multiple
        options={options}
        value={value1}
        onChange={(event, item) => {
          console.log('onChange:', event, item)
        }}
        onChangeSelectedItems={items => {
          console.log('onChangeSelectedItems', items)
          setValue1(items)
        }}
        placeholder="Выберите"
        loadingPlaceholder="Загрузка..."
        multipleText="Выбрано: "
      />
      <Select
        style={{ width: 200 }}
        grouped
        multiple
        options={options}
        value={value2}
        onChange={(event, item) => console.log('onChange:', event, item)}
        onChangeSelectedItems={items => {
          console.log('onChangeSelectedItems', items)
          setValue2(items)
        }}
        placeholder="Выберите"
        loadingPlaceholder="Загрузка..."
        multipleText="Выбрано: "
      />
    </div>
  )
}

Select

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Select(List, единичный выбор)

Select(List, множественный выбор)

Select(GroupedList, единичный выбор)

Select(GroupedList, множественный выбор)

Select(List, единичный выбор)