Password Input
A password field with a show and hide toggle and, when choosing a new password, a meter that says how strong it is and what would make it stronger.
Rendering Password Input…
Installation
Copy the source into your project with the CLI. It lands under @/components/ui and is yours to edit.
npx mlola-ui add password-inputUsage
import { PasswordInput } from "@/components/ui/password-input";
export default function Example() {
return <PasswordInput label="New password" name="password" strength />;
}Styling comes from the engine stylesheet and the nearest theme. Set it once at the root:
<html data-theme="graphite" data-mode="light">HTML
The markup the example above renders, at rest. The interaction lives in the React component; from another framework, set the attributes below as the state changes.
<div class="ml-password-input">
<div class="ml-input-field">
<label class="ml-input-label" id="input-2-label" for="input-2">New password</label>
<div class="ml-input-control" data-trailing="">
<input class="ml-input" id="input-2" aria-describedby="password-input-1" data-variant="default" data-size="md" type="password" autoComplete="new-password" autoCapitalize="none" autoCorrect="off" spellCheck="false" name="password"/>
<span class="ml-input-trailing"><button class="ml-password-input-toggle" type="button" aria-label="Show password" aria-pressed="false" data-hit="expand"><svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" data-optical-size="default" style="color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" pathLength="1"></path><circle cx="12" cy="12" r="3" pathLength="1"></circle></svg></button></span>
</div>
</div>
<div class="ml-password-input-strength" id="password-input-1" data-strength="empty" aria-live="polite">
<span class="ml-password-input-meter" aria-hidden="true"><span></span><span></span><span></span></span>
<p>Use 8 or more characters.</p>
</div>
</div>Options
| Prop | Values | Default |
|---|---|---|
size | smmdlg | — |
variant | defaultfilledsubtle | — |
Every prop with a fixed set of values, read from the exported TypeScript types. Open the Code tab above for the rest of the API.
Classes and attributes
A class names each element; data-* and aria-* attributes carry its variant and state. The values listed are the ones the stylesheet draws; the default needs no attribute.
| Class | Attributes |
|---|---|
ml-password-input | — |
ml-password-input-toggle | aria-pressed="true" |
ml-password-input-strength | data-strength="medium | strong | weak" |
ml-password-input-meter | — |
Accessibility and theming
- Semantic elements, accessible names and state relationships are part of the contract.
- Keyboard, pointer and touch paths are operable; focus stays visible in every theme.
- Light and dark modes pass WCAG AA contrast in all 5 canonical themes.
- Reduced motion and forced colors keep meaning and operation.
Dependencies
Installed alongside this component. No third-party UI runtime is ever added.
- input
@mlola-ui/behavior@mlola-ui/icons