Select

Select — выпадающий список с одиночным выбором, собранный на Ark Select и Field. Триггер показывает label выбранного пункта (или placeholder), список открывается порталом и рисует пункты ячейками Cell. Пункт (SelectItem) — это value и label, опционально description и avatar; выбранный отмечается галочкой. Значение — контролируемая модель: пара value / onValueChange (string | null, null — ничего не выбрано). По умолчанию mode=field — самостоятельное поле с рамкой как у Input, с пропсами Field (label, error); mode=inline — голый триггер для встраивания в составной контрол.

Использует: Cell, Field

Статус

Анатомия

Select

Field.Root (обёртка, mode=field)

Label (label)

Trigger (кнопка)

ValueText (label выбранного / placeholder)

Indicator (каретка)

Error (error, при invalid)

Content (выпадающий список, портал в body)

Item (Cell: avatar, label, description)

ItemIndicator (галочка у выбранного)

Примеры

Пункты-ячейки

Пункт списка — это Cell: label становится заголовком (и текстом выбранного значения в триггере), description — описанием под ним, avatar — аватаром слева (ReactNode, кладётся в Cell.Avatar — обычно Avatar.Root с частями). Так селект из простого списка строк превращается в выбор сущности — исполнителя, проекта, организации.

Исполнитель

Ошибка

Непустой error помечает поле как invalid (красная рамка у триггера) и рисует текст ошибки под ним — как у Input. Обычно error приходит из валидатора формы: пусто — поле в норме, есть строка — показывается ошибка.

Колонка

Выберите колонку

Встроенный вариант

mode="inline" убирает обёртку Field: остаётся голый триггер без рамки, лейбла и текста ошибки — для встраивания селекта внутрь составного контрола или тулбара. Ширина выпадающего списка при этом — от контента пунктов, а не от триггера.

API

Prop	Type	Default
`items`* Пункты выпадающего списка	`SelectItem[]`	-
`value`* Значение селекта (контролируемая модель)	`string \| null`	-
`onValueChange`* Вызывается при выборе пункта	`(value: string \| null) => void`	-
`placeholder` Плейсхолдер триггера, пока ничего не выбрано	`string`	-
`trigger` Кастомное содержимое триггера вместо текста выбранного пункта — например, EntityLabel выбранного участника. Стрелка-индикатор остаётся; без пропа (или с undefined) — текст label / placeholder	`ReactNode`	-
`mode` Раскладка селекта: field — самостоятельное поле с рамкой как у Input (label/error через Field); inline — голый триггер для встраивания в составной контрол	`"field" \| "inline"`	`"field"`
`size` Размер компонента	`Size`	-
`radius` Скругление углов: circle — «таблетка»	`Radius`	-
`label` Текст лейбла над контролом	`ReactNode`	-
`error` Текст ошибки под контролом; при наличии поле помечается как invalid	`ReactNode`	-
`iconLeft` Декоративная иконка слева внутри контрола	`Icon`	-
`iconRight` Декоративная иконка справа внутри контрола	`Icon`	-
`invalid` Помечает поле ошибочным: контрол получает `data-invalid`, и только в этом состоянии рендерится Field.Error	`FieldArkRootProps["invalid"]`	-
`disabled` Отключает поле: контрол внутри становится недоступен	`FieldArkRootProps["disabled"]`	-
`required` Помечает поле обязательным	`FieldArkRootProps["required"]`	-
`readOnly` Значение видно, но изменить его нельзя	`FieldArkRootProps["readOnly"]`	-

Наследуется от Pick<VisualProps, K>, Omit<FieldRootProps, "children">