PasswordMeter
A strength meter and a list of rules under a new password field.
SourcePackage @weft-js/warp
Preview
tsx
import { state } from '@weft-js/core'import { Input, PasswordMeter, Stack } from '@weft-js/warp'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 @weft-js/warpUsage
tsx
import { PasswordMeter } from '@weft-js/warp'Accessibility
- Each rule says itself, so colour is never alone.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | 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