Fluxo UIFluxo UIv0.4.1

Password

A secure password input component with visibility toggle and strength indicator options.

Basic Usage

Basic Password Input

Basic Example
import { Password } from 'fluxo-ui';

function MyComponent() {
  const [password, setPassword] = useState('');

  return (
    <Password
      label="Password"
      placeholder="Enter your password"
      value={password}
      onChange={(e) => setPassword(e.target.value)}
    />
  );
}

States

Password Input States

<Password
  label="Normal"
  placeholder="Enter password"
  value={password}
  onChange={(e) => setPassword(e.value)}
/>
<Password
  label="Disabled"
  placeholder="Disabled"
  value={password}
  onChange={(e) => setPassword(e.value)}
  disabled
/>

Import

import { Password } from 'fluxo-ui';

Props

value
string

Current value of the password input (controlled)

placeholder
string

Placeholder text

label
string

Label text

error
string | boolean

Error message string (also marks invalid). Pass `true` to mark invalid without a message

invalid
boolean

Force the field into an invalid state without an error message

helperText
ReactNode

Helper text rendered under the input and linked via aria-describedby

disabled
booleanfalse

Disable the input

readonly
booleanfalse

Make the input read-only

required
booleanfalse

Mark the input as required

toggleable
booleantrue

Show password visibility toggle button

showPassword
boolean

Controlled password visibility state

maxLength
number

Maximum character limit

minLength
number

Minimum character requirement

autoComplete
string"current-password"

Auto-complete hint

autoFocus
booleanfalse

Auto focus the input on mount

id
string

Unique identifier for the input

name
string

Name attribute for the input

onChange
function

Change event handler

className
string

Additional CSS classes

strengthMeter
boolean | PasswordStrengthMeterProps

When truthy, render a PasswordStrengthMeter wired to the input value. Pass props (without value) to configure rules, allowed characters, thresholds, custom rules, and meter style

Features

Visibility Toggle

Built-in eye icon button to reveal or hide the password text

Controlled Visibility

Manage the visible state externally via the showPassword prop

Validation States

Error messages, required marking, disabled and readonly modes

AutoComplete Hint

Configurable autocomplete attribute for password managers and browsers

Accessibility

ARIA labels, keyboard focus, and screen-reader-friendly toggle button

Theming

Full dark/light + 5 brand themes via CSS variables — zero extra config