Password Input

Used to allow users enter secure text such as passwords and API keys.

Password

import { PasswordInput } from '@fidely-ui/react/password-input'

export const PasswordInputBasics = () => {
  return (
    <PasswordInput.Root>
      <PasswordInput.Label>Password</PasswordInput.Label>
      <PasswordInput.Control>
        <PasswordInput.Input placeholder="enter password" />
        <PasswordInput.VisibilityTrigger>
          <PasswordInput.Indicator />
        </PasswordInput.VisibilityTrigger>
      </PasswordInput.Control>
    </PasswordInput.Root>
  )
}

Usage

import { PasswordInput } from '@fidely-ui/react'

<PasswordInput.Root>
  <PasswordInput.Label />
  <PasswordInput.Control>
    <PasswordInput.Input />
    <PasswordInput.VisibilityTrigger>
      <PasswordInput.Indicator />
    </PasswordInput.VisibilityTrigger>
  </PasswordInput.Control>
</PasswordInput.Root>

Examples

Pass the size prop to the Password.Root change the size of the password input.

Password

import { PasswordInput, Stack } from '@fidely-ui/react'

export const PasswordInputSizes = () => {
  const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const

  return (
    <Stack gap={2}>
      {sizes.map((size) => (
        <PasswordInput.Root size={size} key={size}>
          <PasswordInput.Label>Password</PasswordInput.Label>
          <PasswordInput.Control>
            <PasswordInput.Input placeholder="enter password" />
            <PasswordInput.VisibilityTrigger>
              <PasswordInput.Indicator />
            </PasswordInput.VisibilityTrigger>
          </PasswordInput.Control>
        </PasswordInput.Root>
      ))}
    </Stack>
  )
}

Autocomplete

Use the autoComplete prop to manage browser autocompletion.

new-password — The user is creating a new password.

current-password — The user is entering an existing password.

Password

import { PasswordInput } from '@fidely-ui/react/password-input'

export const PasswordInputAuto = () => {
  return (
    <PasswordInput.Root autoComplete="new-password">
      <PasswordInput.Label>Password</PasswordInput.Label>
      <PasswordInput.Control>
        <PasswordInput.Input placeholder="enter password" />
        <PasswordInput.VisibilityTrigger>
          <PasswordInput.Indicator />
        </PasswordInput.VisibilityTrigger>
      </PasswordInput.Control>
    </PasswordInput.Root>
  )
}

Custom Icon and Fallback

Wrap PasswordInput.Indicator with your custom icon and provide a fallback for when the icon cannot be rendered.

Password

import { PasswordInput } from '@fidely-ui/react/password-input'
import { FaEyeSlash, FaRegFaceRollingEyes } from 'react-icons/fa6'

export const PasswordInputIcon = () => {
  return (
    <PasswordInput.Root>
      <PasswordInput.Label>Password</PasswordInput.Label>
      <PasswordInput.Control>
        <PasswordInput.Input placeholder="enter password" />
        <PasswordInput.VisibilityTrigger>
          <PasswordInput.Indicator fallback={<FaEyeSlash />}>
            <FaRegFaceRollingEyes />
          </PasswordInput.Indicator>
        </PasswordInput.VisibilityTrigger>
      </PasswordInput.Control>
    </PasswordInput.Root>
  )
}

Field

Combine PasswordInput with Field component for full field layouts.

Password

Enter your passwordPassword must be greater than 3 chars.

'use client'

import { useState } from 'react'
import { Field, PasswordInput } from '@fidely-ui/react'

export const PasswordInputField = () => {
  const [value, setValue] = useState('')
  const isInvalid = value.length < 3

  return (
    <Field.Root invalid={isInvalid} required>
      <PasswordInput.Root>
        <PasswordInput.Label>
          Password <Field.RequiredIndicator />
        </PasswordInput.Label>
        <PasswordInput.Control>
          <PasswordInput.Input onChange={(e) => setValue(e.target.value)} />
          <PasswordInput.VisibilityTrigger>
            <PasswordInput.Indicator />
          </PasswordInput.VisibilityTrigger>
        </PasswordInput.Control>
      </PasswordInput.Root>
      <Field.HelperText>Enter your password</Field.HelperText>
      <Field.Error>Password must be greater than 3 chars.</Field.Error>
    </Field.Root>
  )
}

Invalid

Pass the invalid prop to the PasswordInput.Root.

Password

'use client'

import { useState } from 'react'
import { PasswordInput } from '@fidely-ui/react/password-input'

export const PasswordInputInvalid = () => {
  const [value, setValue] = useState('')
  const isInvalid = value.length < 3

  return (
    <PasswordInput.Root invalid={isInvalid}>
      <PasswordInput.Label>Password</PasswordInput.Label>
      <PasswordInput.Control>
        <PasswordInput.Input
          placeholder="enter password"
          onChange={(e) => setValue(e.target.value)}
        />
        <PasswordInput.VisibilityTrigger>
          <PasswordInput.Indicator />
        </PasswordInput.VisibilityTrigger>
      </PasswordInput.Control>
    </PasswordInput.Root>
  )
}

asChild

Use the asChild prop to render or use the child elemets component.

If you are using the Fidely Input component as a child, it will apply extra styling pass the unstyled prop to the input component to remove default styles.

Password

import { Input, PasswordInput } from '@fidely-ui/react'

export const PasswordInputAsChild = () => {
  return (
    <PasswordInput.Root>
      <PasswordInput.Label>Password</PasswordInput.Label>
      <PasswordInput.Control>
        <PasswordInput.Input asChild>
          <Input placeholder="enter password" unstyled />
        </PasswordInput.Input>
        <PasswordInput.VisibilityTrigger>
          <PasswordInput.Indicator />
        </PasswordInput.VisibilityTrigger>
      </PasswordInput.Control>
    </PasswordInput.Root>
  )
}

Ignoring password managers

Use the ignorePasswordManager prop to ignore password managers like 1Password, LastPass, etc. This is useful for non-login scenarios such as API keys, secure notes, or temporary passwords.

Currently, this only works for 1Password, LastPass, Bitwarden, Dashlane, and Proton Pass.

Password

import { PasswordInput } from '@fidely-ui/react/password-input'

export const PasswordInputIgnore = () => {
  return (
    <PasswordInput.Root ignorePasswordManagers>
      <PasswordInput.Label>Password</PasswordInput.Label>
      <PasswordInput.Control>
        <PasswordInput.Input placeholder="enter password" />
        <PasswordInput.VisibilityTrigger>
          <PasswordInput.Indicator />
        </PasswordInput.VisibilityTrigger>
      </PasswordInput.Control>
    </PasswordInput.Root>
  )
}

Controlled visibility

Use the visible and onVisibilityChange props to control the visibility of the password input.

Password is hidden

'use client'

import { useState } from 'react'
import { Em, PasswordInput } from '@fidely-ui/react'

export const PasswordInputControlled = () => {
  const [visible, setVisible] = useState(false)

  return (
    <PasswordInput.Root
      visible={visible}
      onVisibilityChange={(e) => setVisible(e.visible)}
    >
      <PasswordInput.Label>
        Password is{' '}
        <Em color={'orange.9'}>{visible ? 'visible' : 'hidden'}</Em>{' '}
      </PasswordInput.Label>
      <PasswordInput.Control>
        <PasswordInput.Input placeholder="enter password" />
        <PasswordInput.VisibilityTrigger>
          <PasswordInput.Indicator />
        </PasswordInput.VisibilityTrigger>
      </PasswordInput.Control>
    </PasswordInput.Root>
  )
}

Props

Root

Prop	Type	Default	Description
`asChild`	`boolean`	—	Uses the provided child element as the rendered element, merging its props and behavior.
`autoComplete`	`'current-password' \| 'new-password'`	`'current-password'`	Controls the browser’s autocomplete behavior for the password field.
`defaultVisible`	`boolean`	—	The initial visibility state of the password input.
`disabled`	`boolean`	—	Whether the password input is disabled.
`ignorePasswordManagers`	`boolean`	—	When `true`, the input will attempt to block autofill from password managers. Supported managers: 1Password, LastPass, Bitwarden, Dashlane, Proton Pass.
`invalid`	`boolean`	—	Marks the input as invalid.
`name`	`string`	—	The name attribute for the input element.
`onVisibilityChange`	`(details: VisibilityChangeDetails) => void`	—	Callback fired when the visibility state changes.
`readOnly`	`boolean`	—	Whether the input is read-only.
`required`	`boolean`	—	Whether the input is required.
`visible`	`boolean`	—	Controls the visibility state when using a controlled visibility pattern.

Control

Prop	Type	Default	Description
`asChild`	`boolean`	—	Uses the provided child element as the rendered element, merging behavior.

Input

Prop	Type	Default	Description
`asChild`	`boolean`	—	Uses the provided child element as the rendered element, merging behavior.