Installation
Nothing to add. This component ships as source in your download, so it is already in your project.
src/vui/password-input.tsx@viliha/vui-react/password-inputThe exported names are at the top of that file. The import path is an alias the download's tsconfig.json points at src/vui/, so you can move that folder and change one line rather than every file that imports from it.
Usage
import { PasswordInput } from "@viliha/vui-react/password-input";Exports
Everything this family exports. They are read from the source, so this list is what the package actually ships.
| Prop | Type | Default |
|---|---|---|
| PasswordInput | component | — |
PasswordInput props
Plus everything Omit<React.ComponentProps<"input">, "type"> accepts, passed straight through to the underlying element.
| Prop | Type | Default | What it does |
|---|---|---|---|
| error? | string | — | Inline validation message: red border + alert-triangle tooltip. Falsy = valid. |
| maskChar? | string | "*" | Character shown for each hidden character in `"asterisk"` mode. Default `"*"`. |
| maskSize? | "sm" | "base" | "sm" | The type size of the field **and** its mask, set together. |
| mask? | "asterisk" | "native" | — | How the value is hidden. Defaults to `NEXT_PUBLIC_PASSWORD_MASK` (`"native"` app-wide, else `"asterisk"`); this prop overrides it per field. |
| leadingInset? | string | — | The start inset the field carries because something is drawn inside it, as a CSS length. **The asterisk overlay has to match the input's padding or it paints over the thing that caused it**. |
Customize
Every value this component draws comes from the theme: the colours, the radius, the control height and the type scale. Change a token and this moves with everything else, which is the difference between theming the product and overriding a component. See Theming for the token contract, and Swapping defaults for replacing the markup itself.