Перейти к содержимому

Документация

PasswordField

PasswordField — составной компонент на основе TextField.

Storybook Исходники Figma

Пропсы корня

Проп	Тип	По умолчанию
`disabled`	`boolean`	—
Отключает поле пароля. Запрещает ввод и взаимодействие и применяет визуальное отключённое состояние.
`shown`	`boolean`	—
Управляет тем, показывается ли пароль открытым текстом. Если задан, компонент становится контролируемым.
`defaultShown`	`boolean`	`false`
Начальная видимость для неконтролируемого использования.
`onChangeShown`	`(shown: boolean) => void`	—
Вызывается при переключении видимости.
`size`	`TextFieldSize`	—
Визуальный размер текстового поля. Влияет на отступы, размер шрифта и общую высоту. 'sm': компактное поле; 'md': по умолчанию; 'lg': просторная раскладка
`error`	`boolean`	—
Показывает поле ввода в состоянии ошибки.
`ref`	`Ref<HTMLDivElement>`	—
Ref, передаваемый на элемент-обёртку. Полезен для программного управления, фокуса или интеграции.

Также принимает все атрибуты <div>.

Дочерние части

PasswordFieldInput: поле ввода пароля или текста с учётом контекста.
PasswordFieldToggleIconButton: кнопка, переключающая состояние видимости.
PasswordFieldShownIcon: иконка состояния «показан».
PasswordFieldHiddenIcon: иконка состояния «скрыт».

`PasswordFieldInput`

Проп	Тип	По умолчанию
`ref`	`Ref<HTMLInputElement>`	—
Ref, передаваемый на нижележащий нативный элемент `<input>`.

Также принимает все атрибуты <input>.

`PasswordFieldHiddenIcon`

Проп	Тип	По умолчанию
`size`	`IconSize`	—
Предопределённый токен размера иконки. Может быть переопределён явными шириной и высотой.
`ref`	`Ref<SVGSVGElement>`	—
Ref на SVG-элемент
`strokeWidth`	`number`	—
Толщина обводки линий и фигур SVG (в px или pt).
`children`	`ReactNode`	—
Содержимое иконки (обязательно). Принимает: иконки из `~/icons`; собственный встроенный SVG; компоненты иконок сторонних библиотек (например, Lucide, Tabler)

Также принимает все HTML-атрибуты.

`PasswordFieldShownIcon`

Проп	Тип	По умолчанию
`size`	`IconSize`	—
Предопределённый токен размера иконки. Может быть переопределён явными шириной и высотой.
`ref`	`Ref<SVGSVGElement>`	—
Ref на SVG-элемент
`strokeWidth`	`number`	—
Толщина обводки линий и фигур SVG (в px или pt).
`children`	`ReactNode`	—
Содержимое иконки (обязательно). Принимает: иконки из `~/icons`; собственный встроенный SVG; компоненты иконок сторонних библиотек (например, Lucide, Tabler)

Также принимает все HTML-атрибуты.

`PasswordFieldToggleIconButton`

Проп	Тип	По умолчанию
`size`	`IconButtonSize`	—
Размер контейнера кнопки. Управляет отступами и общей кликабельной областью.
`asChild`	`boolean`	—
Если true, рендерит кнопку как дочерний компонент через `Slot` (например, из Radix UI). Включает полиморфный рендер — полезно, чтобы кнопка работала как ссылка или собственный тег.
`variant`	`ButtonBaseVariant`	—
Определяет визуальный стиль кнопки: цветовую схему и акцент.
`appearance`	`ButtonBaseAppearance`	—
Настраивает структурный внешний вид кнопки (фон, рамка и т. д.).
`disabled`	`boolean`	—
Отключает кнопку при true. Запрещает взаимодействие и применяет визуальное отключённое состояние. Не применяется с `asChild`: отключённым состоянием владеет дочерний элемент, например через `aria-disabled` или ссылку без `href`.
`className`	`string`	—
Необязательный собственный CSS-класс для элемента кнопки. Полезен для переопределений дизайн-системы или локальных стилей.
`children`	`ReactNode`	—
Содержимое кнопки — текст, иконка или любой React-узел.
`ref`	`Ref<HTMLButtonElement>`	—
Ref, передаваемый на нативный элемент `<button>`. Даёт прямой доступ к DOM для управления фокусом или измерений.

Также принимает все атрибуты <button>.

Типы

PasswordFieldProps
PasswordFieldInputProps
PasswordFieldToggleIconButtonProps
PasswordFieldShownIconProps
PasswordFieldHiddenIconProps

Модель состояния

Видимостью можно управлять через shown и onChangeShown или оставить её неконтролируемой с defaultShown.
PasswordFieldInput меняет свой type в зависимости от контекста.
Кнопка-переключатель меняет видимость и оставляет фокус там, куда его поместил браузер, как нативная кнопка; видимость она сообщает через aria-pressed.
Собственный onClick на переключателе выполняется после переключения и не заменяет его.