Fieldset
Fieldset — обёртка-группа для нескольких контролов: заголовок (Legend) сверху, под ним необязательная подсказка, затем сами контролы, а снизу текст ошибки на всю группу. В отличие от Field, который одевает один контрол, Fieldset ничего не оборачивает — он раскладывает переданные children и кладёт вокруг них общие подписи. Внутрь передают уже готовые контролы набора (Input, Textarea, Select, Checkbox и т.д.), а не голые элементы. direction задаёт раскладку: column (по умолчанию) — контролы друг под другом на всю ширину, row — в один ряд одинаковой ширины. Непустой error помечает группу как invalid и рисует ErrorText снизу.
Анатомия
Примеры
Ряд
direction="row" ставит контролы в один ряд, растягивая их на равную ширину (flex: 1). Удобно для коротких смежных полей — оценка и приоритет, диапазон «с … до». По умолчанию direction — column: контролы идут друг под другом на всю ширину.
Подсказка
helperText — необязательная строка под заголовком: поясняет всю группу целиком, а не отдельный контрол. Для подписи к одному полю используйте его собственный label.
Ошибка
Непустой error помечает Fieldset как invalid и рисует ErrorText под всеми контролами — это ошибка уровня группы (например, взаимная несогласованность полей). Ошибку конкретного контрола показывайте через его собственный error.
API
| Prop | Type | Default |
|---|---|---|
titleЗаголовок группы, отображается над инпутами | ReactNode | - |
helperTextПодсказка под заголовком | ReactNode | - |
errorТекст ошибки под инпутами; при наличии филдсет помечается как invalid | ReactNode | - |
childrenНабор инпутов или текстареа | ReactNode | - |
directionНаправление раскладки инпутов: column — друг под другом на всю ширину, row — в один ряд одинакового размера | "column" | "row" | "column" |
Наследуется от Omit< ComponentProps<typeof FieldsetArk.Root>, "title" >