Password

Secure text field with hidden characters.

Preview

Enter your password.

Usage

<FormField
control={form.control}
name="password"
render={({ field }) => (
<FormItem>
<FormLabel>Password</FormLabel>
<FormControl>
<PasswordInput
placeholder="Enter your password"
maxLength={255}
{...field}
value={typeof field.value === "string" ? field.value : ""}
onChange={(event) => field.onChange(event.target.value)}
/>
</FormControl>
<FormDescription>Enter your password.</FormDescription>
<FormMessage />
</FormItem>
)}
/>

Details

Sugarforms wraps the input with password visibility behavior. The reference below shows the component details.

Component referenceform-builder/components/ui/password-input.tsx