PasswordField

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

Обзор

PasswordField использует контракт стилизации TextField. Его собственный визуальный слой — кнопка-переключатель с иконкой, которая привязана к общей высоте поля ввода и токенам наведения.

Публичные CSS-переменные

Password

Переменная	Значение	Влияет на
сохраняет переключатель квадратным по высоте полякнопка-переключатель		В этом состоянии изменений не видно
цвет иконки по умолчаниюкнопка-переключатель		В этом состоянии изменений не видно
подложка при наведениикнопка-переключатель		В этом состоянии изменений не видно
подложка при нажатиикнопка-переключатель		В этом состоянии изменений не видно
Цвет иконки кнопки.`PasswordFieldToggleIconButton`		В этом состоянии изменений не видно
Цвет иконки кнопки при наведении.`PasswordFieldToggleIconButton`		В этом состоянии изменений не видно
Цвет иконки кнопки при нажатии.`PasswordFieldToggleIconButton`		В этом состоянии изменений не видно
Фон кнопки.`PasswordFieldToggleIconButton`		В этом состоянии изменений не видно
Фон кнопки при наведении.`PasswordFieldToggleIconButton`		В этом состоянии изменений не видно
Фон кнопки при нажатии.`PasswordFieldToggleIconButton`		В этом состоянии изменений не видно

Измените значение, чтобы примерить его в демо. Наведите на переменную, чтобы обвести то, что она меняет; переключите состояние превью, чтобы увидеть переменные наведения, нажатия, фокуса, отключённого состояния и ошибки. Клик по имени копирует его.

Переменные частей

Корень

Корень наследует тот же контракт обёртки, что и TextField.

Кнопка-переключатель

PasswordFieldToggleIconButton сопоставляет --icon-button-size с --input-height и использует прозрачный фон до наведения или нажатия.

Взаимодействие состояний и вариантов

размер приходит от корня TextField
отключённое состояние наследуется через поле ввода и контекст
состояние «показан/скрыт» влияет на отображение иконки, а не на поверхность обёртки

Примеры

Собственные иконки видимости

LTRRTL

custom-visibility-icons.tsx · 27 строк

import {
  Label,
  PasswordField,
  PasswordFieldHiddenIcon,
  PasswordFieldInput,
  PasswordFieldShownIcon,
  PasswordFieldToggleIconButton,
} from '@vega-ui/react';
import { LockIcon, LockOpenIcon } from '@vega-ui/icons';
import { useId } from 'react';

export default function CustomVisibilityIcons() {

Не переопределяйте

не делайте переключатель похожим на отдельное несвязанное действие
не нарушайте общий размер --input-height у поля и переключателя