PasswordInput

react-hook-form-bound password field. Renders the @uxf/ui/text-input primitive with a built-in show/hide toggle, managing the input's value, isInvalid, and helperText from form state.

When to use

Use @uxf/form/password-input for a password field inside a @uxf/form form — it adds a visibility toggle (switches the input between type="password" and type="text", restoring the caret position) and an optional minimum-length rule. There is no same-named @uxf/ui twin; for a plain text field use @uxf/ui/text-input.

Usage

import { Form } from "@uxf/form/form";
import { PasswordInput } from "@uxf/form/password-input";
import { useForm } from "react-hook-form";

interface FormData {
    password: string;
}

function Example() {
    const formApi = useForm<FormData>({ defaultValues: { password: "" } });

    return (
        <Form formApi={formApi} id="example" onSubmit={(values) => console.log(values)}>
            <PasswordInput control={formApi.control} isRequired label="Password" minLength={12} name="password" />
        </Form>
    );
}

Value is string (rendered as an empty string when the field value is nullish).

Props

PasswordInputProps<FormData> = ControlProps<FormData> + the visual props of the @uxf/ui/text-input twin (minus the ones this field manages: isFocused, isInvalid, max, min, name, onChange, value, type) + the props below.

Prop	Type	Default	Description
`control`	`Control<FormData>`	—	Required. The `control` from `useForm`.
`name`	`FieldPath<FormData>`	—	Required. Field path in the form values.
`rules`	`RegisterOptions`	—	Extra react-hook-form rules; merged with the built-in validation below.
`shouldUnregister`	`boolean`	—	Unregister the field (drop its value) on unmount.
`minLength`	`number`	—	Minimum length enforced by the built-in `minLength` validator; also forwarded to the twin.
`minLengthMessage`	`string`	localized	Override the min-length validation message.
`renderVisibilitySetter`	`(isVisible: boolean, onToggle: () => void) => ReactNode`	—	Replace the default eye/eye-slash toggle button rendered in the twin's `rightElement`.
`isRequired`	`boolean`	`false`	Adds a `required` rule and the required indicator.
`requiredMessage`	`string`	localized	Message for the `required` rule.
`onChange`	`(value: string \| null, event) => void`	—	Called after the field value updates.

All other props (label, placeholder, size, variant, helperText, leftAddon/rightAddon/leftElement, maxLength, autoComplete, …) are forwarded to the twin — see @uxf/ui/text-input. The rightElement slot is used by the visibility toggle.

Validation

isRequired adds a required rule (requiredMessage to override; key uxf-form-password-input:validation.required).
minLength adds a length check; its message (uxf-form-password-input:validation.min-length) interpolates {{minLength}} and is overridable via minLengthMessage.
Add further rules via rules (a function validate is merged in under the custom key); the field-level error is shown as the twin's helperText and sets isInvalid.

Requirements

Must be rendered inside a Form — it reads the form context (formId, and inherits isDisabled / isReadOnly) and needs a react-hook-form control.
Ships no CSS of its own; it renders @uxf/ui/text-input (and @uxf/ui/button + @uxf/ui/icon for the default toggle), so include those components' stylesheet(s) and the @uxf/ui token layer — see @uxf/ui/text-input.

Links

Rendered primitive: @uxf/ui/text-input

Default

Open in new tab

When to use

Usage

import { Form } from "@uxf/form/form"; import { PasswordInput } from "@uxf/form/password-input"; import { useForm } from "react-hook-form"; interface FormData { password: string; } function Example() { const formApi = useForm<FormData>({ defaultValues: { password: "" } }); return ( <Form formApi={formApi} id="example" onSubmit={(values) => console.log(values)}> <PasswordInput control={formApi.control} isRequired label="Password" minLength={12} name="password" /> </Form> ); }

Value is string (rendered as an empty string when the field value is nullish).

Props

Prop

Type

Default

Description

control

Control<FormData>

—

Required. The control from useForm.

name

FieldPath<FormData>

—

Required. Field path in the form values.

rules

RegisterOptions

—

Extra react-hook-form rules; merged with the built-in validation below.

shouldUnregister

boolean

—

Unregister the field (drop its value) on unmount.

minLength

number

—

Minimum length enforced by the built-in minLength validator; also forwarded to the twin.

minLengthMessage

string

localized

Override the min-length validation message.

renderVisibilitySetter

(isVisible: boolean, onToggle: () => void) => ReactNode

—

Replace the default eye/eye-slash toggle button rendered in the twin's rightElement.

isRequired

boolean

false

Adds a required rule and the required indicator.

requiredMessage

string

localized

Message for the required rule.

onChange

(value: string | null, event) => void

—

Called after the field value updates.

Validation

isRequired adds a required rule (requiredMessage to override; key uxf-form-password-input:validation.required).

minLength adds a length check; its message (uxf-form-password-input:validation.min-length) interpolates {{minLength}} and is overridable via minLengthMessage.

Add further rules via rules (a function validate is merged in under the custom key); the field-level error is shown as the twin's helperText and sets isInvalid.

Requirements

Must be rendered inside a Form — it reads the form context (formId, and inherits isDisabled / isReadOnly) and needs a react-hook-form control.

Ships no CSS of its own; it renders @uxf/ui/text-input (and @uxf/ui/button + @uxf/ui/icon for the default toggle), so include those components' stylesheet(s) and the @uxf/ui token layer — see @uxf/ui/text-input.