Create Password Field

Related components

CreatePasswordField is the preferred way to set a new password. It's a PasswordField that lists the password rules below the field and updates them as people type.

label defaults to "Create a password" and name to password. Pass a validate function that returns an object of rule → true/false, and a defaultValidation object with the same keys for the first render. validate can be async, and runs at most every 500ms while people type.

<div className="rounded-md bg-white p-8">
  <Form onSubmit={() => {}}>
    <CreatePasswordField
      appearance="modern"
      validate={(password) => ({
        ['At least 8 characters']: password.length >= 8,
        ['Includes a number']: /[0-9]/.test(password),
        ['Not a common password']: !['password', 'sunshine'].includes(password)
      })}
      defaultValidation={{
        ['At least 8 characters']: false,
        ['Includes a number']: false,
        ['Not a common password']: false
      }}
      messageDirection="column"
      className="w-80"
    />
  </Form>
</div>

Rules

The rules show when the field is focused or has been left, depending on the form's validationMode:

Met rules are success (green, with a tick).
Unmet rules are neutral while the field is focused, and error (red) once people leave it.

The field only passes validation when every rule is met.

Appearance

standard (default) has a white background and a grey-700 border. modern has a filled background and no border.

<div className="rounded-md bg-white p-8">
  <Form onSubmit={() => {}}>
    <div className="flex w-80 flex-col gap-6">
      <CreatePasswordField
        name="standard"
        validate={(password) => ({
          ['At least 8 characters']: password.length >= 8,
          ['Includes a number']: /[0-9]/.test(password),
          ['Not a common password']: !['password', 'sunshine'].includes(password)
        })}
        defaultValidation={{
          ['At least 8 characters']: false,
          ['Includes a number']: false,
          ['Not a common password']: false
        }}
      />
      <CreatePasswordField
        name="modern"
        appearance="modern"
        validate={(password) => ({
          ['At least 8 characters']: password.length >= 8,
          ['Includes a number']: /[0-9]/.test(password),
          ['Not a common password']: !['password', 'sunshine'].includes(password)
        })}
        defaultValidation={{
          ['At least 8 characters']: false,
          ['Includes a number']: false,
          ['Not a common password']: false
        }}
      />
    </div>
  </Form>
</div>

Size

sm, md (default) and lg.

<div className="rounded-md bg-white p-8">
  <Form onSubmit={() => {}}>
    <div className="flex w-80 flex-col gap-6">
      <CreatePasswordField name="sm" label="Size sm" size="sm" appearance="modern" validate={() => ({})} defaultValidation={{}} />
      <CreatePasswordField name="md" label="Size md" size="md" appearance="modern" validate={() => ({})} defaultValidation={{}} />
      <CreatePasswordField name="lg" label="Size lg" size="lg" appearance="modern" validate={() => ({})} defaultValidation={{}} />
    </div>
  </Form>
</div>