Password Field

Use it on your site

import { useRive } from '@rive-app/react-canvas';

export function PasswordField() {
  const { rive, RiveComponent } = useRive({
    src: '/form-password.riv',
    artboard: 'Password Field',
    stateMachines: 'State Machine 1',
    autoplay: true,
    autoBind: true,
  });

  // every input on this page is a view model property
  const vm = rive?.viewModelInstance;
  if (vm) vm.color('iconColor').value = 0xFF745FFC;

  return <RiveComponent style={{ width: '100%', height: 400 }} />;
}

Inputs: text, placeholder, fontSize, disabled, revealed, iconColor, weakColor, okColor, strongColor, boxColor, borderColor, focusColor, textColor, placeholderColor, disabledColor. All on the PasswordField view model.

How it's built

From the Form Set: a real text field for passwords. As you type, the padlock's shackle comes down a notch per strength step and turns from weak to okay to strong, then clicks shut with a little squash. Tap the eye to show the password: it opens, blinks now and then and follows the pointer. Read strength (0 to 4) in your app, pick every colour, and disabled greys it out and ignores taps.

1. 1
   One number outA small script scores the text and writes strength: 0 when empty, 1 weak, up to 4 strong. Read it in your app to block weak passwords.
2. 2
   Four steps, four layersEach strength step is its own layer. It moves the shackle down a notch, so jumps (paste, delete all) just work. Step 4 adds the click, the squash and the ring.
3. 3
   The eye is a booleanrevealed shows or hides the text. A tap on the eye flips it, or set it from your app. The pupil follows the pointer with a constraint, no code.
4. 4
   Disableddisabled swaps the art to disabledColor, fades the field and ignores taps on the eye.