Password Input

Mobile Support: Full

Toggle the visibility of a password input

On this page

Import
Usage
Figma Library
Props

Import

import { PasswordInput } from "@vitality-ds/components";

Usage

Use Password inputs when you request the user to enter their password. This component includes the option to show a "show/hide" toggle that can be "opted-out".

<PasswordInput value="123345" />

<DocsBox
  css={{
    padding: 64,
    maxWidth: 400,
    boxShadow: "$md",
    backgroundColor: "$neutral1",
    borderRadius: "$default",
  }}
>
  <Stack align="stretch" spacing="lg">
    <Typography variant="pageTitle">Log in</Typography>
    <Typography color="lowContrast">
      To continue, please log in with your credentials below
    </Typography>
    <FormField type="text" label="Email address" />
    <FormField type="password" label="Password" />
    <Button appearance="primary">Log in</Button>
  </Stack>
</DocsBox>

Figma Library

Props

adornStart

Description

Content to "adorn" the start of the input - typically text, icons or buttons.

Type

{ type: "text"; props: TextAdornmentProps; }

className

Type

never

disabled

Description

Determines whether the user has the ability to interact with the input.

Type

boolean

Default Value

false

disableVisibilitySwitch

Type

boolean

hasError

Description

Adds additional styling to indicate failed validation.

Type

boolean

Default Value

false

Description

The id of the input. Used to connect label to input.

Type

string

maskProps

Description

Mask Props

Type

MaskProps

name

Description

The name of the text input. Submitted with its owning form as part of a name/value pair.

Type

string

onChange

Description

The callback function. Triggered when any character is added or removed from the input.

Type

ChangeEventHandler<HTMLInputElement> & ((e: ChangeEvent<HTMLInputElement>) => void)

placeholder

Description

Shows an example of what could be inputted. Only visible when no value is present. Commonly used as a "pseudo" helper message.

Type

string

style

Type

never

textAlign

Description

aligns the Text of the input

Type

("left" | "right"

value

Description

The inputted value. Can be used to prepopulate data.

Type

(string | number | readonly string[]) & string