Acronis UIKit
Legacy (shadcn-uikit)Components

Password Input

A text input with a toggle to show or hide the password value.

Usage

import { PasswordInput } from '@acronis-platform/shadcn-uikit';

Default

Basic password input with show/hide toggle.

Preview
View source
import { useState } from 'react';
import { Input } from '@acronis-platform/shadcn-uikit/react';
import { HideIcon, ShowIcon } from '@acronis-platform/shadcn-uikit';
export function PasswordInputDefault() {
  const [showPassword, setShowPassword] = useState(false);

  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <label
          htmlFor="pwd-default"
          className="text-xs font-medium text-[rgba(36,49,67,0.7)]"
        >
          Password
        </label>
        <div className="relative">
          <Input
            id="pwd-default"
            type={showPassword ? 'text' : 'password'}
            placeholder="Password"
            className="pr-10 h-12"
          />
          <button
            type="button"
            onClick={() => setShowPassword(!showPassword)}
            className="absolute right-3 top-1/2 -translate-y-1/2 text-[#2668C5] hover:text-[#1a4d8f] transition-colors"
            aria-label={showPassword ? 'Hide password' : 'Show password'}
          >
            {showPassword ? (
              <ShowIcon className="h-4 w-4" />
            ) : (
              <HideIcon className="h-4 w-4" />
            )}
          </button>
        </div>
      </div>
    </div>
  );
}

Filled

Password input with a pre-filled value.

Preview
View source
import { useState } from 'react';
import { Input } from '@acronis-platform/shadcn-uikit/react';
import { HideIcon, ShowIcon } from '@acronis-platform/shadcn-uikit';
export function PasswordInputFilled() {
  const [showPassword, setShowPassword] = useState(false);
  const [passwordValue, setPasswordValue] = useState('MyP@ssw0rd');

  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <div className="relative">
          <Input
            type={showPassword ? 'text' : 'password'}
            value={passwordValue}
            onChange={(e) => setPasswordValue(e.target.value)}
            className="pr-10 h-12 pt-5 pb-1"
          />
          <label className="absolute left-4 top-1 text-xs font-medium text-[rgba(36,49,67,0.7)] pointer-events-none">
            Password
          </label>
          <button
            type="button"
            onClick={() => setShowPassword(!showPassword)}
            className="absolute right-3 top-1/2 -translate-y-1/2 text-[#2668C5] hover:text-[#1a4d8f] transition-colors"
            aria-label={showPassword ? 'Hide password' : 'Show password'}
          >
            {showPassword ? (
              <ShowIcon className="h-4 w-4" />
            ) : (
              <HideIcon className="h-4 w-4" />
            )}
          </button>
        </div>
      </div>
    </div>
  );
}

With Hint

Password input with a helper hint below the field.

Hint message

Preview
View source
import { useState } from 'react';
import { Input } from '@acronis-platform/shadcn-uikit/react';
import { HideIcon, ShowIcon } from '@acronis-platform/shadcn-uikit';
export function PasswordInputWithHint() {
  const [showPassword, setShowPassword] = useState(false);

  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <div className="relative">
          <Input
            type={showPassword ? 'text' : 'password'}
            placeholder="Password"
            className="pr-10 h-12"
          />
          <button
            type="button"
            onClick={() => setShowPassword(!showPassword)}
            className="absolute right-3 top-1/2 -translate-y-1/2 text-[#2668C5] hover:text-[#1a4d8f] transition-colors"
            aria-label={showPassword ? 'Hide password' : 'Show password'}
          >
            {showPassword ? (
              <ShowIcon className="h-4 w-4" />
            ) : (
              <HideIcon className="h-4 w-4" />
            )}
          </button>
        </div>
        <p className="text-xs font-medium text-[rgba(36,49,67,0.7)] px-0 py-1">
          Hint message
        </p>
      </div>
    </div>
  );
}

Error

Password input in an error state.

Error message

Error message

Preview
View source
import { Input } from '@acronis-platform/shadcn-uikit/react';
import { HideIcon } from '@acronis-platform/shadcn-uikit';
export function PasswordInputError() {
  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <div className="relative">
          <Input
            type="password"
            placeholder="Password"
            className="pr-10 h-12 border-[#EA3939] focus-visible:ring-[#EA3939]"
            aria-invalid="true"
            aria-describedby="pwd-error-1"
          />
          <button
            type="button"
            className="absolute right-3 top-1/2 -translate-y-1/2 text-[#EA3939]"
            aria-label="Show password"
          >
            <HideIcon className="h-4 w-4" />
          </button>
        </div>
        <p
          id="pwd-error-1"
          className="text-xs font-medium text-[#EA3939] px-0 py-1"
        >
          Error message
        </p>
      </div>
      <div className="space-y-2">
        <div className="relative">
          <Input
            type="password"
            value="••••••••••"
            readOnly
            className="pr-10 h-12 pt-5 pb-1 border-[#EA3939] focus-visible:ring-[#EA3939]"
            aria-invalid="true"
            aria-describedby="pwd-error-2"
          />
          <label className="absolute left-4 top-1 text-xs font-medium text-[rgba(36,49,67,0.7)] pointer-events-none">
            Password
          </label>
          <button
            type="button"
            className="absolute right-3 top-1/2 -translate-y-1/2 text-[#EA3939]"
            aria-label="Show password"
          >
            <HideIcon className="h-4 w-4" />
          </button>
        </div>
        <p
          id="pwd-error-2"
          className="text-xs font-medium text-[#EA3939] px-0 py-1"
        >
          Error message
        </p>
      </div>
    </div>
  );
}

Disabled

Password input in a disabled state.

Hint message

Preview
View source
import { Input } from '@acronis-platform/shadcn-uikit/react';
import { HideIcon } from '@acronis-platform/shadcn-uikit';
export function PasswordInputDisabled() {
  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <div className="relative">
          <Input
            type="password"
            placeholder="Password"
            disabled
            className="pr-10 h-12 bg-[rgba(38,104,197,0.05)]"
          />
          <button
            type="button"
            disabled
            className="absolute right-3 top-1/2 -translate-y-1/2 text-[rgba(38,104,197,0.3)] cursor-not-allowed"
            aria-label="Show password"
          >
            <HideIcon className="h-4 w-4" />
          </button>
        </div>
      </div>
      <div className="space-y-2">
        <div className="relative">
          <Input
            type="password"
            value="••••••••••"
            disabled
            readOnly
            className="pr-10 h-12 pt-5 pb-1 bg-[rgba(38,104,197,0.05)]"
          />
          <label className="absolute left-4 top-1 text-xs font-medium text-[rgba(36,49,67,0.7)] pointer-events-none">
            Password
          </label>
          <button
            type="button"
            disabled
            className="absolute right-3 top-1/2 -translate-y-1/2 text-[rgba(38,104,197,0.3)] cursor-not-allowed"
            aria-label="Show password"
          >
            <HideIcon className="h-4 w-4" />
          </button>
        </div>
        <p className="text-xs font-medium text-[rgba(36,49,67,0.7)] px-0 py-1">
          Hint message
        </p>
      </div>
    </div>
  );
}

Specs

Full specification overview of the password input.

Height: 48px (fixed)
Padding: 16px horizontal
Border Radius: 4px
Icon Size: 16×16px
Border Default: rgba(38, 104, 197, 0.3)
Border Error: #EA3939
Icon Color: #2668C5 (default), #EA3939 (error)
Typography:
  • Label: Inter Medium, 12px, 16px line-height
  • Value: Inter Regular, 14px, 24px line-height
Preview
View source
export function PasswordInputSpecs() {
  return (
    <div className="space-y-3 text-sm">
      <div>
        <strong className="font-semibold">Height:</strong> 48px (fixed)
      </div>
      <div>
        <strong className="font-semibold">Padding:</strong> 16px horizontal
      </div>
      <div>
        <strong className="font-semibold">Border Radius:</strong> 4px
      </div>
      <div>
        <strong className="font-semibold">Icon Size:</strong> 16×16px
      </div>
      <div>
        <strong className="font-semibold">Border Default:</strong> rgba(38, 104,
        197, 0.3)
      </div>
      <div>
        <strong className="font-semibold">Border Error:</strong> #EA3939
      </div>
      <div>
        <strong className="font-semibold">Icon Color:</strong> #2668C5
        (default), #EA3939 (error)
      </div>
      <div>
        <strong className="font-semibold">Typography:</strong>
        <ul className="ml-4 mt-1 space-y-1">
          <li>Label: Inter Medium, 12px, 16px line-height</li>
          <li>Value: Inter Regular, 14px, 24px line-height</li>
        </ul>
      </div>
    </div>
  );
}

API Reference

The PasswordInput extends the standard HTML input element props.

Edit on GitHub

Label

A text label associated with a form control for accessibility and usability.

Radio Group

A set of mutually exclusive options where only one can be selected at a time.

On this page

UsageDefaultFilledWith HintErrorDisabledSpecsAPI Reference