Field

Field — составной компонент оболочки формового контрола: лейбл сверху, иконки и кнопка «Очистить» поверх самого контрола, текст ошибки снизу.

Field.Root держит состояние поля (invalid, disabled, required, readOnly) и раздаёт его частям и контролу внутри. Field.Label — подпись сверху, Field.Error — текст ошибки снизу (Ark рендерит его только при invalid), Field.Control — обёртка вокруг самого контрола: в неё кладут контрол и накладываемые на него части Field.IconLeft, Field.IconRight, Field.Clear. Отступы под наложенные части Field.Control считает сам — по тому, какие части в нём лежат.

Готовые Input, Textarea, Select и Search уже собраны на Field и принимают его пропсы плоско (label, error, iconLeft, iconRight) — в большинстве случаев берут именно их. Собирать части руками нужно, когда в ту же оболочку надо одеть собственный контрол, которого в наборе нет: контрол оборачивают в Ark Field.Input / Field.Textarea (или свой), чтобы он получил привязку лейбла и состояние invalid, как в примерах ниже.

Использует: ButtonIcon

Используется в: Input, Select, Textarea

Электронная почта

Анатомия

Field.Root

Label

Control

IconLeft

контрол (children)

IconRight

Clear

Error (при invalid)

Примеры

Ошибка

invalid на Field.Root помечает поле ошибочным: контрол получает data-invalid (красная рамка), и только в этом состоянии Ark рендерит Field.Error. Поэтому Field.Error держат в разметке всегда, а видимостью управляет invalid.

Электронная почта

Введите корректный адрес: имя@домен

Иконки

Field.IconLeft и Field.IconRight — декоративные иконки внутри контрола по краям (кликов не ловят). Внутренние отступы под них Field.Control добавляет контролу сам — через CSS-переменные --field-padding-*, — чтобы текст не заезжал на иконку.

Электронная почта

Кнопка очистки

Field.Clear — кнопка «Очистить» справа внутри контрола, по клику вызывающая onClick. Обычно её рендерят только при непустом значении. Если рядом стоит Field.IconRight, кнопка встаёт слева от иконки.

Заголовок

API

Prop	Type	Default
`children` Части поля: Field.Label, Field.Control с контролом внутри, Field.Error	`ReactNode`	-
`invalid` Помечает поле ошибочным: контрол получает `data-invalid`, и только в этом состоянии рендерится Field.Error	`FieldArkRootProps["invalid"]`	-
`disabled` Отключает поле: контрол внутри становится недоступен	`FieldArkRootProps["disabled"]`	-
`required` Помечает поле обязательным	`FieldArkRootProps["required"]`	-
`readOnly` Значение видно, но изменить его нельзя	`FieldArkRootProps["readOnly"]`	-

Наследуется от ComponentProps<typeof FieldArk.Root>

Field.Label

Подпись над контролом; Ark связывает её с контролом.

Prop	Type	Default
`children`* Текст лейбла над контролом	`ReactNode`	-

Field.Control

Обёртка вокруг контрола — держит наложенные части и считает по ним внутренние отступы контрола.

Prop	Type	Default
`children`* Сам контрол (инпут, текстареа, триггер селекта) и накладываемые на него части: Field.IconLeft, Field.IconRight, Field.Clear	`ReactNode`	-

Field.IconLeft

Декоративная иконка слева внутри контрола.

Prop	Type	Default
`children`* Декоративная иконка слева внутри контрола	`ReactNode`	-

Field.IconRight

Декоративная иконка справа внутри контрола.

Prop	Type	Default
`children`* Декоративная иконка справа внутри контрола	`ReactNode`	-

Field.Clear

Кнопка «Очистить» справа внутри контрола; значение сбрасывает потребитель в onClick.

Prop	Type	Default
`onClick`* Вызывается по клику — потребитель очищает значение контрола	`() => void`	-

Field.Error

Текст ошибки под контролом — рендерится только при invalid у Field.Root.

Prop	Type	Default
`children`* Текст ошибки под контролом	`ReactNode`	-