Fieldset

Fieldset — обёртка-группа для нескольких контролов: заголовок (Legend) сверху, под ним необязательная подсказка, затем сами контролы, а снизу текст ошибки на всю группу. В отличие от Field, который одевает один контрол, Fieldset ничего не оборачивает — он раскладывает переданные children и кладёт вокруг них общие подписи. Внутрь передают уже готовые контролы набора (Input, Textarea, Select, Checkbox и т.д.), а не голые элементы. direction задаёт раскладку: column (по умолчанию) — контролы друг под другом на всю ширину, row — в один ряд одинаковой ширины. Непустой error помечает группу как invalid и рисует ErrorText снизу.

Новая задача

Анатомия

Fieldset
Legend (title)
HelperText (helperText)
Content (children, direction column | row)
ErrorText (error, при invalid)

Примеры

Ряд

direction="row" ставит контролы в один ряд, растягивая их на равную ширину (flex: 1). Удобно для коротких смежных полей — оценка и приоритет, диапазон «с … до». По умолчанию directioncolumn: контролы идут друг под другом на всю ширину.

Планирование

Подсказка

helperText — необязательная строка под заголовком: поясняет всю группу целиком, а не отдельный контрол. Для подписи к одному полю используйте его собственный label.

УведомленияПисьма приходят на адрес аккаунта

Ошибка

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

Тихие часы
Начало должно быть раньше конца

API

PropTypeDefault
title

Заголовок группы, отображается над инпутами

ReactNode-
helperText

Подсказка под заголовком

ReactNode-
error

Текст ошибки под инпутами; при наличии филдсет помечается как invalid

ReactNode-
children

Набор инпутов или текстареа

ReactNode-
direction

Направление раскладки инпутов: column — друг под другом на всю ширину, row — в один ряд одинакового размера

"column" | "row""column"

Наследуется от Omit< ComponentProps<typeof FieldsetArk.Root>, "title" >