Skip to content
kerfjsGitHub

PasswordMeter

A strength meter and a list of rules under a new password field.

SourcePackage @kerf-js/veneer

Preview

tsx
import { state } from '@kerf-js/core'import {  Input,  PasswordMeter,  Stack} from '@kerf-js/veneer'export function Live() {  const value = state('')  return (    <Stack gap="related">      <Input        label="New password"        type="password"        autocomplete="off"        value={value.value}        hint="Try a sample, not a real one."        onInput={(e) =>          (value.value = e.currentTarget.value)        }      />      <PasswordMeter value={value.value} />    </Stack>  )}

Installation

npm install @kerf-js/veneer

Usage

tsx
import { PasswordMeter } from '@kerf-js/veneer'

Accessibility

  • Each rule says itself, so colour is never alone.

API Reference

PropTypeDefaultDescription
valuestring—The password so far.

Parts

Every element carries a stable name, so you can style it from your own CSS: [data-scope="meter"] [data-part="label-row"]

label-rowtrackrangesr-only

RelatedSign upReset password