Text4 checks
FormPassword
Show toggle and an optional strength meter.
Example
Installation
bunx --bun shadcn@latest add @fieldkit/form-passwordNeeds the @fieldkit registry. Add it once
Usage
- 1
Add the field to your schema
schema.tsimport { z } from "zod"import { passwordField } from "@/lib/field-schemas" export const schema = z.object({ password: passwordField({ minScore: 3 }),}) - 2
Render it inside a Form
The name prop matches the schema key.
example-form.tsximport { Form } from "@/components/form/form"import { FormPassword } from "@/components/form/form-password"import { FormSubmit } from "@/components/form/form-submit"import { FieldGroup } from "@/components/ui/field"import { schema } from "./schema" export function ExampleForm() { return ( <Form schema={schema} defaultValues={{ password: "" }} onSubmit={save} > <FieldGroup> <FormPassword name="password" /> <FormSubmit>Save</FormSubmit> </FieldGroup> </Form> )}
Checks
CheckOptionError message
Length
minUse at least 8 charactersLetters and numbers
defaultAdd an uppercase letterStrength score
minScoreAdd another word or a few symbolsConfirm matches
refine on the objectPasswords do not matchBest practices
- Allow paste and password managers
- Call loadPasswordScorer() before parsing on the server when you use minScore
Try these values
Terminal
passwordField()| Input | Result | Output |
|---|---|---|
"Kijani2026" | Valid | "Kijani2026" |
"kijani2026" | Invalid | Add an uppercase letter |
"Kijani" | Invalid | Add a numberUse at least 8 characters |
"abcdefgh" | Invalid | Add an uppercase letterAdd a number |
API reference
FormPassword
PropDescription
strengthbooleanShows the meter. On by default when the schema sets minScore.labelActionReact.ReactNodeShows next to the label, like a Forgot password? link.Field frame
PropDescription
namestringKey in the schema. Also picks the preset label and autocomplete.labelReact.ReactNodeOverrides the preset label. Pass null to hide it.descriptionReact.ReactNodeHint under the control.requiredbooleanOverrides the asterisk read from the schema.fieldPropsFormFieldPropsProps for the wrapping Field, such as className.