Множественный выбор и добавление значений.  
Поддерживаются любые модели данных с помощью пропсов `getOptionValue`, `getOptionLabel` и `getNewOptionData`.  
Изменить визуальное оформление значений можно с помощью `renderChip` и `renderOption`.  
Поле ввода принимает все валидные для `<input>` значения.

```jsx
const colors = [{value: '1', label: 'Красный'}, {value: '2', label: 'Синий'}];
const groups = [{ value: 'download', label: 'Скачать все и вся!', icon: <Icon12Download /> }, { value: '1', label: 'Arctic Monkeys', src: getAvatarUrl('audio_arctic_monkeys')}, {value: '2', label: 'Звери', src: getAvatarUrl('audio_leto_zveri')}, {value: '4', label: 'FACE', src: getAvatarUrl('audio_face')}, {value: '3', label: 'Depeche Mode', src: getAvatarUrl('audio_depeche_mode')}, {value: '5', label: 'Linkin Park', src: getAvatarUrl('audio_linkin_park')}]

const Example = () => {
  const [selectedGroups, setSelectedGroups] = React.useState([]);
  const [selectedColors, setSelectedColors] = React.useState([{value: '1', label: 'Красный'}]);
  const [selectedColorsCopy, setSelectedColorsCopy] = React.useState([]);
  
  const groupsChipsProps = {
    value: selectedGroups,
    onChange: setSelectedGroups,
    options: groups,
    placeholder:"Не выбраны",
    emptyText: 'Совсем ничего не найдено',
  };

  const colorsChipsProps = {
    value: selectedColors,
    onChange: setSelectedColors,
    options: colors,
    top:"Выберите или добавьте цвета",
    placeholder:"Не выбраны",
    creatable: true,
  };

  const colorsCopyChipsProps = {
      value: selectedColorsCopy,
      onChange: setSelectedColorsCopy,
      options: colors,
      top:"Выберите или добавьте цвета",
      placeholder:"Не выбраны",
      creatable: true,
      creatableText: '',
  };

  return (
    <View activePanel="profile" id="profile">
      <Panel id="profile">
        <PanelHeader>
          Предпочтения
        </PanelHeader>
        <Group>
          <FormItem top="Выберите группы">
            <ChipsSelect
              {...groupsChipsProps}
              showSelected={false}
              closeAfterSelect={false}
              onClick={() => setActiveView('groups')}
              onChangeStart={(e, option) => {
                if (option.value === 'download') {
                  e.preventDefault();
                  alert('download!');
                }   
              }}
              renderChip={({ value, label, option: { src, icon }, ...rest }) => (
                <Chip
                  value={value}
                  before={<Avatar size={20} src={src} />}
                  {...rest}
                >
                  {label}
                </Chip>
              )}
              renderOption={({ option: { src, value, icon }, ...otherProps }) => {
                return (
                  <CustomSelectOption
                    before={icon ? <Avatar size={20}>{icon}</Avatar> : <Avatar size={20} src={src} />}
                    {...otherProps}
                  />
                );
              }}
            />
          </FormItem>
          <FormItem top="Выберите или добавьте цвета">
            <ChipsSelect {...colorsChipsProps}/>
          </FormItem>
          <FormItem top="Выберите или добавьте цвета (creatable без кнопки создания)">
            <ChipsSelect {...colorsCopyChipsProps} />
          </FormItem>
        </Group>
      </Panel>
    </View>
  );
}

<Example />
```