---
description: Компонент, который визуально имитирует компонент выбора из списка.
tags: selection
---

<Overview group="forms">

# SelectMimicry [tag:component]

Компонент, который визуально имитирует компонент выбора из списка.
Используется в случаях, когда нужно создать элемент, похожий на [`Select`](/components/select),
но с пользовательским поведением при нажатии (например, вызов модального окна).

</Overview>

{/* @example-description: Базовый `SelectMimicry` с отображением выбранного значения. */}
<Playground style={{ width: 270 }}>
  ```jsx
  <SelectMimicry>Значение</SelectMimicry>
  ```
</Playground>

## Состояния

### `disabled`

Свойство `disabled` блокирует взаимодействие с компонентом и добавляет визуальную индикацию недоступности.

{/* @example-description: `SelectMimicry` в неактивном состоянии с плейсхолдером. */}
<Playground style={{ maxWidth: 270 }}>
  ```jsx
  <SelectMimicry placeholder="Выберите значение" disabled />
  ```
</Playground>

## Валидация

Свойство `status` используется для визуализации валидации компонента - некорректности заполненного поля (значение `"error"`)
или успешной валидации (значение `"valid"`).

> Если вы используете `SelectMimicry` вместе с [`FormItem`](/components/form-item), вам достаточно указать свойство `status` только у
> [`FormItem`](/components/form-item).

{/* @example-description: Валидационные состояния `SelectMimicry`: `error` и `valid`. */}
<Playground style={{ maxWidth: 270 }}>
  ```jsx
  <SelectMimicry status="error">Значение</SelectMimicry>
  <SelectMimicry status="valid">Значение</SelectMimicry>
  ```
</Playground>

## Доступность (a11y) [#a11y]

Компонент поддерживает все стандартные `aria`-атрибуты, если вам необходимо переопределить
стандартное поведение.

## Свойства и методы [#api]

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `after` | `ReactNode` | `<DropdownIcon />` | Добавляет иконку справа.  Рекомендации:  - Используйте следующие размеры иконок `12` \| `16` \| `20` \| `24` \| `28`. - Используйте [IconButton](https://vkui.io/components/icon-button), если вам нужна иконка, реагируюущая на нажатие. |
| `align` | `AlignType` | `-` |  |
| `before` | `ReactNode` | `-` | Добавляет иконку слева.  Рекомендации:  - Используйте следующие размеры иконок `12` \| `16` \| `20` \| `24` \| `28`. - Используйте [IconButton](https://vkui.io/components/icon-button), если вам нужна иконка, реагирующая на нажатие. |
| `disabled` | `boolean` | `-` | Блокировка взаимодействия с компонентом. |
| `getRootRef` | `Ref<HTMLElement>` | `-` |  |
| `multiline` | `boolean` | `-` | Включает многострочный режим отображения. |
| `selectType` | `SelectType` | `default` | Тип селекта, влияющий на внешний вид компонента. |
| `status` | `"default" \| "error" \| "valid"` | `-` | Статус отображения поля в форме. |