Path

Path — поле адреса: одна рамка, в которой нередактируемые части пути (домен, слэши) стоят рядом с вводимым сегментом, и строка читается как готовый URL. Так человек видит, что вводит не логин, а путь, по которому сущность будет доступна.

Path.Root собран на Field: принимает label и error, рисует рамку с метриками Input и раскладывает сегменты в строку. Path.Segment — статичный текст (tulls.ru, /), Path.Input — вводимый сегмент с парой value / onValueChange. Между сегментами можно поставить чужой контрол без своей рамки — например Select mode="inline", когда часть пути выбирают из списка.

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

tulls.ru/

Анатомия

Path.Root
Field.Root (обёртка)
Label (label)
Control (рамка)
Segment
Input | встроенный контрол
Error (error, при invalid)

Примеры

Ошибка

error подсвечивает рамку целиком и показывает текст под полем — как у Input.

tulls.ru/
Только латинские буквы, цифры и дефис

Выбор сегмента

Сегмент-владелец выбирается прямо в строке адреса: Select mode="inline" встаёт между Path.Segment без своей рамки.

tulls.ru/
/

API

PropTypeDefault
children*

Сегменты адреса по порядку: Path.Segment (нередактируемый текст), Path.Input (вводимый сегмент) или встроенный контрол (Select mode="inline")

ReactNode-
className

Внешний класс рамки контрола

string-
label

Текст лейбла над контролом

ReactNode-
error

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

ReactNode-

Наследуется от Pick< FieldShellProps, "label" | "error" >

Path.Segment

Нередактируемая часть адреса: не сжимается и приглушена цветом.

PropTypeDefault
children*

Нередактируемый текст сегмента: домен, слэш, фиксированная часть пути

ReactNode-

Path.Input

Вводимый сегмент — Ark Field.Input без своей рамки: получает привязку лейбла и состояние invalid от Path.Root.

PropTypeDefault
value

Значение вводимого сегмента (контролируемая модель)

string-
onValueChange

Вызывается при изменении значения

(value: string) => void-
placeholder

Плейсхолдер сегмента

string-