Skip Navigation
React Magma

Password Input

The PasswordInput is a variation of the Input component. Please see the Input documentation for more examples and information.

Basic Usage

By default, users can show the password, by pressing a toggle button.

import React from 'react';


import { PasswordInput } from 'react-magma-dom';


export function Example() {
  return <PasswordInput labelText="Password" />;
}

Hide Password Mask Button

To prevent users from showing the password, the optional boolean isPasswordMaskButtonHidden can be used.

import React from 'react';


import { PasswordInput } from 'react-magma-dom';


export function Example() {
  return (
    <PasswordInput
      isPasswordMaskButtonHidden
      labelText="Password with no unmask button"
    />
  );
}

Custom Strings

The following option props can be used to override various text strings that appear on the UI or to users using assistive technology: hiddenPasswordAnnounceText, hidePasswordButtonAriaLabel, hidePasswordButtonText, shownPasswordAnnounceText, showPasswordButtonAriaLabel, showPasswordButtonText.

import React from 'react';


import { PasswordInput } from 'react-magma-dom';


export function Example() {
  return (
    <PasswordInput
      labelText="Password"
      hiddenPasswordAnnounceText="Password is now concealed"
      hidePasswordButtonAriaLabel="Conceal password"
      hidePasswordButtonText="Conceal"
      shownPasswordAnnounceText="Password is now revealed"
      showPasswordButtonAriaLabel="Reveal password. Note: this will visually expose your password on the screen"
      showPasswordButtonText="Reveal"
    />
  );
}

Disabled

import React from 'react';


import { PasswordInput } from 'react-magma-dom';


export function Example() {
  return (
    <PasswordInput isPasswordMaskButtonHidden labelText="Disabled" disabled />
  );
}

Input Size

The inputSize prop can be used to control the input size. Options are medium and large, with medium being the default.

import React from 'react';


import { PasswordInput, InputSize } from 'react-magma-dom';


export function Example() {
  return (
    <PasswordInput inputSize={InputSize.large} labelText="Large password" />
  );
}

Inverse

isInverse is an optional boolean prop, that may be passed in when inputs are to be displayed on a dark background.

import React from 'react';


import { PasswordInput, Card, CardBody } from 'react-magma-dom';


export function Example() {
  return (
    <Card isInverse>
      <CardBody>
        <PasswordInput
          helperMessage="Helper text"
          isInverse
          labelText="Inverse input"
        />
      </CardBody>
    </Card>
  );
}

Error Message

import React from 'react';


import { PasswordInput } from 'react-magma-dom';


export function Example() {
  return (
    <PasswordInput
      errorMessage="Your password is incorrect"
      labelText="Password with error"
    />
  );
}

Password Input Props

This component uses forwardRef. The ref is applied to the input element.

All of the standard input attributes can be provided as props and will be applied to the input element that gets rendered.

Many of the PasswordInput props are shared with the Input component. Please see the Input documentation for more examples and information.

hiddenPasswordAnnounceText

Type

string

Default

-

hidePasswordButtonAriaLabel

Description

Aria-label for the "Hide Password" button

Type

string

Default

"Hide password"

hidePasswordButtonText

Description

Text displayed on screen for the "Hide Password" button

Type

string

Default

"Hide"

inputSize

Description

Relative size of the component

Type

enum, one of:
InputSize.large
InputSize.medium

Default

InputSize.medium

isInverse

Description

If true, the component will have inverse styling to better appear on a dark background

Type

boolean

Default

false

isPasswordMaskButtonHidden

Description

If true, label text will be hidden visually, but will still be read by assistive technology

Type

boolean

Default

false

showPasswordButtonAriaLabel

Description

Aria-label for the "Show Password" button

Type

string

Default

"Show password. Note: this will visually expose your password on the screen"

showPasswordButtonText

Description

Text displayed on screen for the "Show Password" button

Type

string

Default

"Show"

shownPasswordAnnounceText

Type

string

Default

-

width

Description

String to determine width of input, must be suffixed with "px", "rem", or "%""

Type

string

Default

"auto"

On this page

Deploys by Netlify