v1.0.7

Password Input

Experimental

This component is considered experimental. Reach out to the Spark team to find out more about what this means.

Open in Storybook Edit this page

Installation

Install yarn add @spark-web/password-input

npm @spark-web/password-input

Source GitHub.com

Bundle unpkg.com

The password input component allows accepting of password text values. The component builds off its underlying TextInput component and toggles the input mode between password and text depending on whether the show password icon button is toggled to show or hide the password value.

Usage

The component must be nested within a Field. See Field for more details.

Examples

Field utilities

You can use the parent Field to set appropriate field level labels, description adornments and messages.

Password

Forgot password?

Make sure your chosen password is at least 10 characters long.

Open in Playroom

<Stack gap="large">
  <Field
    label="Password"
    adornment={
      <Text>
        <TextLink href="#">Forgot password?</TextLink>
      </Text>
    }
    description={
      'Make sure your chosen password is at least 10 characters long.'
    }
  >
    <PasswordInput />
  </Field>
</Stack>

<Stack gap="large">
  <Field
    label="Password"
    adornment={
      <Text>
        <TextLink href="#">Forgot password?</TextLink>
      </Text>
    }
    description={
      'Make sure your chosen password is at least 10 characters long.'
    }
  >
    <PasswordInput />
  </Field>
</Stack>

Uncontrolled

Similar to TextInput, the component can be uncontrolled and managing its own internal state.

Example uncontrolled

The password value is:

Open in Playroom

const passwordRef = React.useRef(null);
const [value, setValue] = React.useState('');
const showValueHandler = React.useCallback(() => {
  setValue(passwordRef.current?.value);
}, [setValue]);

return (
  <Stack gap="large">
    <Field label="Example uncontrolled">
      <PasswordInput ref={passwordRef} />
    </Field>
    <Button onClick={showValueHandler}>Display password value</Button>
    <Text>The password value is: {value}</Text>
  </Stack>
);

const passwordRef = React.useRef(null);
const [value, setValue] = React.useState('');
const showValueHandler = React.useCallback(() => {
  setValue(passwordRef.current?.value);
}, [setValue]);

return (
  <Stack gap="large">
    <Field label="Example uncontrolled">
      <PasswordInput ref={passwordRef} />
    </Field>
    <Button onClick={showValueHandler}>Display password value</Button>
    <Text>The password value is: {value}</Text>
  </Stack>
);

Controlled

Similar to TextInput, the component can be controlled by passing in a value and onChange handler and have its state managed in a parent component.

Example controlled

The current password value is:

Open in Playroom

const [value, setValue] = React.useState(``);

return (
  <Stack gap="large">
    <Field label="Example controlled">
      <PasswordInput value={value} onChange={e => setValue(e.target.value)} />
    </Field>
    <Text>The current password value is: {value}</Text>
  </Stack>
);

const [value, setValue] = React.useState(``);

return (
  <Stack gap="large">
    <Field label="Example controlled">
      <PasswordInput value={value} onChange={e => setValue(e.target.value)} />
    </Field>
    <Text>The current password value is: {value}</Text>
  </Stack>
);

Props

The component passes props into its underlying TextInput component and are not listed here.