Password

Secrets with a strength check.

<sui-password>Text inputsStable

About

Password field with a show and hide eye and an optional four-step strength meter. The meter runs deep orange, orange, navy, navy: strong is never green. Form-associated: it posts name=value and binds to React, Vue (v-model) and Angular forms.

Usage

<sui-password label="Password" name="password" autocomplete="current-password"></sui-password> <script type="module"> import { defineCustomElements } from "@shineui/core/loader"; import "@shineui/core/shineui.css"; defineCustomElements(); const el = document.querySelector("sui-password"); el.addEventListener("suiChange", (e) => console.log(e.detail)); </script>

import { SuiPassword } from "@shineui/react"; import "@shineui/core/shineui.css"; export function Example() { return <SuiPassword label="Password" name="password" autocomplete="current-password" onSuiChange={(e) => console.log(e.detail)} />; }

import { Component } from "@angular/core"; import { SuiPassword } from "@shineui/angular"; @Component({ standalone: true, imports: [SuiPassword], template: `<sui-password label="Password" name="password" autocomplete="current-password" (suiChange)="onChange($event)"></sui-password>`, }) export class Example { onChange(e: CustomEvent) { console.log(e.detail); } }

Basic

The eye is a toggle button: Tab reaches it, aria-pressed tracks it, and its name reads "Show password" or "Hide password".

With meter

show-strength shows the four-step meter, described with the field and announced politely as the step changes. Strong is navy, never green.

Labels

The meter words and the eye's name are props, so one translated form can set them without registering anything. The colors stay with the steps, not the words.

Locale

registerLocale takes a page's words once, and every field with that locale picks them up; Intl cannot do this: CLDR has no word for "Weak". A regional tag falls back to its language, an unregistered word stays English, and a label prop still wins. Left unset, locale follows setLocale or html lang.

// setup(root): properties and events setup(root) { import('../../packages/core/dist/index.js').then((core) => { core.registerLocale('fr-FR', { 'password.weak': 'Faible', 'password.fair': 'Moyen', 'password.good': 'Bon', 'password.strong': 'Fort', 'password.show': 'Afficher le mot de passe', 'password.hide': 'Masquer le mot de passe', }); core.registerLocale('de', { 'password.weak': 'Schwach', 'password.show': 'Passwort anzeigen' }); root.querySelector('#pw-fr').locale = 'fr-FR'; root.querySelector('#pw-de').locale = 'de-AT'; }).catch(() => { }); }

Sizes

md is the default, one height with every select, picker and button. lg is the roomier field for a sign-in page; sm packs into table rows. The eye follows the height.

States

The eye stays live on a read-only field: revealing a value you may not change is the point. A disabled field disables the eye too and posts nothing.

In a form

The field posts one entry under its host name. Reset restores the value it mounted with, which for a password is usually empty.

<form id="pw-form" style="display:grid;gap:14px;max-width:340px"> <sui-password label="New password" name="password" required show-strength autocomplete="new-password"></sui-password> <div style="display:flex;gap:8px"> <sui-button type="submit" variant="brand" label="Set password"></sui-button> <sui-button type="reset" variant="outline" label="Reset"></sui-button> </div> <output id="pw-out" style="font:460 13px/1.6 var(--font-sans);color:var(--ink-muted)">Submit to see what posts.</output> </form>

// setup(root): properties and events setup(root) { const form = root.querySelector('#pw-form'); const out = root.querySelector('#pw-out'); form.addEventListener('submit', (e) => { e.preventDefault(); out.textContent = [...new FormData(form)].map(([k, v]) => `${k}=${'*'.repeat(v.length) || '(empty)'}`).join(' '); }); form.addEventListener('reset', () => { out.textContent = 'Reset. Submit to see what posts.'; }); }

Events

suiInput fires on every keystroke, suiChange on commit at blur or Enter. Both carry the value; the log shows its length only. suiFocus and suiBlur follow the input, so a press on the eye reads as a blur.

Idle.

// setup(root): properties and events setup(root) { const log = root.querySelector('#pw-log'); const el = root.querySelector('#pw-events'); el.addEventListener('suiFocus', () => { log.textContent = 'suiFocus'; }); el.addEventListener('suiBlur', () => { log.textContent = 'suiBlur'; }); el.addEventListener('suiInput', (e) => { log.textContent = `suiInput ${e.detail.length} characters`; }); el.addEventListener('suiChange', (e) => { log.textContent = `suiChange ${e.detail.length} characters`; }); }

Keyboard

Key	Action
`Tab`	Moves to the field, then to the eye control, then on; the host itself takes no tab stop.
`Printable characters`	Type into the native input; suiInput fires on every keystroke.
`Space` `Enter`	On the eye control, shows or hides the value.

API

`<sui-password>`

Properties

Property	Attribute	Type	Default	Description
`autocomplete`	`autocomplete`	`string`string \| undefined		Native autocomplete hint, e.g. "current-password" or "new-password". `inputmode` and `enterkeyhint` set on the host reach the input the same way, and `spellcheck` and `autocapitalize` on the host apply to it as they do to any descendant.
`disabled`	`disabled`	`boolean`	`false`	Disables the field and the eye.
`error`	`error`	`string`string \| undefined		Error message; paints the field in the danger tone and sets aria-invalid.
`fairLabel`	`fair-label`	`string`string \| undefined		Meter word for the second step. Overrides the locale; defaults to "Fair".
`goodLabel`	`good-label`	`string`string \| undefined		Meter word for the third step. Overrides the locale; defaults to "Good".
`help`	`help`	`string`string \| undefined		Help text under the field. Replaced by `error` when set.
`hideLabel`	`hide-label`	`string`string \| undefined		Accessible name of the eye while the value is shown. Overrides the locale; defaults to "Hide password".
`invalid`	`invalid`	`boolean`	`false`	Danger border without a message (validation handled elsewhere).
`label`	`label`	`string`string \| undefined		Field label. Without one the field takes the host's `aria-label` or `aria-labelledby` as its name; a visible label wins over both.
`locale`	`locale`	`string`string \| undefined		BCP 47 language tag naming the words the meter and the eye use. They come from `registerLocale()` in `utils/locale`, which the page calls once with its own translations; there is no CLDR data for "Weak", so this cannot be read out of Intl. Set it only where one field speaks a different language from its page: unset, the field takes the page's locale, from `setLocale()` or `<html lang>`. A tag with nothing registered, or a missing word, falls back to English, and a label prop set here still wins.
`maxLength`	`maxlength`	`number`number \| undefined		Maximum number of characters, as the native `maxlength`.
`minLength`	`minlength`	`number`number \| undefined		Native `minlength`: a value shorter than this, once the user has typed, fails as `tooShort`.
`name`	`name`	`string`string \| undefined		Form control name. Reflected: form entry construction reads the content attribute, while all three framework bindings set properties, so an unreflected name posts nothing at all.
`pattern`	`pattern`	`string`string \| undefined		Native `pattern`: a regular expression the whole value must match. The browser checks it and the field reports `patternMismatch` on its validity, the way `required` reports `valueMissing`.
`placeholder`	`placeholder`	`string`string \| undefined		Placeholder text.
`readOnly`	`readonly`	`boolean`	`false`	Display only: the value can be revealed and copied but not edited; the field still posts it. The eye stays live, since reading a value you may not change is the point of a read-only field.
`required`	`required`	`boolean`	`false`	Marks the field required (asterisk + valueMissing validity when empty).
`showLabel`	`show-label`	`string`string \| undefined		Accessible name of the eye while the value is hidden. Overrides the locale; defaults to "Show password".
`showStrength`	`show-strength`	`boolean`	`false`	Shows the strength meter under the field: Weak, Fair, Good or Strong, announced politely as it changes. Named for what it shows, because `feedback` is a `'icon' \| 'text'` union on `sui-copy-button`.
`size`	`size`	`"lg" \| "md" \| "sm"`	`'md'`	Control height: sm 28 for table rows, md 34 for forms and toolbars (the default, shared with the select family and the buttons, so a form built from defaults is one height), lg 42 for a sign-in or marketing page. The eye follows the height.
`strongLabel`	`strong-label`	`string`string \| undefined		Meter word for the fourth step. Overrides the locale; defaults to "Strong".
`value`	`value`	`string`	`''`	Current value. Mutable; listen to suiInput / suiChange to observe edits.
`weakLabel`	`weak-label`	`string`string \| undefined		Meter word for the first step. Overrides the locale; defaults to "Weak".

Events

Event	Detail	React	Vue	Description
`suiBlur`	`void`	`onSuiBlur`	`@sui-blur`	Fires when the input loses focus, to the eye included; no detail. Does not bubble.
`suiChange`	`string`	`onSuiChange`	`@sui-change`	Fires on commit (blur or Enter, native change); detail is the final value.
`suiFocus`	`void`	`onSuiFocus`	`@sui-focus`	Fires when the input takes focus; no detail. The same pair is on every text field. Does not bubble.
`suiInput`	`string`	`onSuiInput`	`@sui-input`	Fires on every keystroke; detail is the current value.

Methods

Method	Signature	Description
`select()`	`select() => Promise<void>`	Selects the field text.
`setFocus()`	`setFocus() => Promise<void>`	Moves keyboard focus into the field.

Theming

Every design token this element can render with, read from its own stylesheets and the ones it imports. Set a token on :root or on any ancestor and every use below follows it. The values shown are the ones in the theme you are viewing. The list is read per stylesheet, so an element that imports a shared drawing module lists that module's tokens too, whether or not it paints with all of them.