Forms · PasswordField

PasswordField

Single-line password input with masked value, visibility toggle, CapsLock awareness, and an optional composable strength meter. Anatomy follows Ark UI; CapsLockIndicator fills a universal gap (10/10 surveyed libraries warn nothing when Caps Lock is on while typing). Soma owns value, masking, autocomplete (current-password/new-password) and Caps Lock detection.

parts{compiled.parts.order.length} events{events.length} keyboard1 sizes{sizes.length} apg textbox

(lastSubmit = v)} > {#if showCapsLockIndicator} {/if} {#if showVisibilityTrigger} {/if} {#if showStrengthMeter} {/if}

trace {#if trace.length === 0} press Caps Lock, click the eye, or press Enter to see events {:else} {#each trace.slice(0, 3) as entry} {entry.event} · {entry.family}{entry.intent ? ' · ' + entry.intent : ''} {fmtTime(entry.at)} {/each} {/if} length {value.length} · strength {strength}/4

{#if tab === 'live'}

Controls

soma owns value, masking and CapsLock detection. eidos owns size, variant, color and icon rendering.

soma props · value & behaviour

value {value.length} chars visible {visible ? 'plaintext' : 'masked'} purpose {#each purposes as p (p)} {/each} placeholder minLength { const v = e.currentTarget.value; minLength = v === '' ? undefined : Number(v); }} /> maxLength { const v = e.currentTarget.value; maxLength = v === '' ? undefined : Number(v); }} /> name

soma props · flags

{#each ['disabled', 'readonly', 'required', 'invalid'] as flag} {flag} {#if flag === 'disabled'} {disabled ? 'on' : 'off'} {:else if flag === 'readonly'} {readonly ? 'on' : 'off'} {:else if flag === 'required'} {required ? 'on' : 'off'} {:else} {invalid ? 'on' : 'off'} {/if} {/each}

eidos props · presentation

size {#each sizes as s (s)} {/each} variant {#each variants as v (v)} {/each} color {#each colors as c (c)} {/each}

Composition · which parts to include

VisibilityTrigger {showVisibilityTrigger ? 'on' : 'off'} CapsLockIndicator {showCapsLockIndicator ? 'on' : 'off'} StrengthMeter {showStrengthMeter ? 'on' : 'off'}

{#if lastSubmit !== null}

Last submitted

{lastSubmit}

{/if}

soma headless · ARIA + behavior only svelte

{somaSnippet}

eidos visual · adds icons, chrome + strength meter svelte

{eidosSnippet}

{/if} {#if tab === 'api'}

API reference

PasswordField composes through 5 parts. Root drives value + visibility + caps detection; every visual part is optional (composition over visibility props).

Provider props

Prop	Type	Notes
value	string	Bindable. Default `''`.
visible	boolean	Bindable. Toggle plaintext / masked. Default `false`.
purpose	'current' \| 'new'	Drives the native `autocomplete` attribute. `'current'` → `current-password` (login). `'new'` → `new-password` (registration / change). Default `'current'`.
minLength / maxLength	number	Native constraints + mirrored ARIA. Used by HTML form validation.
disabled / readonly / required / invalid	boolean	OR-merged with parent `<Field>`.
placeholder	string?	Native placeholder.
name	string?	Form submission name.
aria-label	string?	Override translated 'Password' default. Ignored if inside Field.Label.
onValueChange	(v: string) => void	Fires on every keystroke.
onSubmit	(v: string) => void	Fires on Enter.
onVisibilityChange	(visible: boolean) => void	Fires after the eye toggle.

Eidos visual props

Prop	Type	Default
size	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	`'md'`
variant	ControlVariant	`'surface'`
color	ColorRole	`'primary'`

Reference comparison

Library	Built-in toggle	CapsLock	Strength meter
React Aria	no	no	no
Ark UI	yes	no	external
Chakra v3	yes	no	sibling cmp
Mantine	yes	no	compose
PrimeReact	yes	no	built-in popup
Ant Design	yes (default)	no	no
shadcn/ui	no	no	no
Material UI	no	no	no
UIX	yes	yes (universal gap)	composable

{/if} {#if tab === 'morfo'}

Morfo contract

Field	Value
name	{passwordFieldMorfo.name}
kebab	`{passwordFieldMorfo.kebab}`
scope	{passwordFieldMorfo.scope.join(', ')}
apg	textbox
parts	{partsList.length}
events	{events.length}

Parts

{#each partsList as part (part.kebab)} {/each}

kebab	marker	element	role	archetype	optional
{part.kebab}	`[{part.marker}]`	<{part.defaultElement}>	{part.role ?? '—'}	{part.archetype ?? '—'}	{part.optional ? 'yes' : 'no'}

Events

{#each events as e (e.name)} {/each}

name	family	verb	target	intent
`{e.name}`	{e.semantic?.family ?? '—'}	{e.semantic?.verb ?? '—'}	`{e.semantic && 'target' in e.semantic ? e.semantic.target.target : '—'}`	{e.semantic && 'intent' in e.semantic && typeof e.semantic.intent === 'string' ? e.semantic.intent : '—'}

{/if} {#if tab === 'sema'}

sema · events

Type a character to fire commit-input. Press Enter to commit commit-submit. Click the eye to fire shift-toggle-visibility. Press Caps Lock while the input is focused to fire shift-caps-state. Use ▶ play to dispatch the event without the gesture.

{#each events as action (action.name)} {@const intentDecl = 'intent' in action.semantic ? action.semantic.intent : undefined} {@const effectiveIntent = typeof intentDecl === 'string' ? intentDecl : undefined} {/each}

name	family	verb	sequence	intent
`{action.name}`	{action.semantic.family}	{action.semantic.verb ?? '—'}	{action.semantic.sequence ?? '—'}	{effectiveIntent ?? '—'}

{/if} {#if tab === 'recipe'}

Eidos recipe

Recipe lives in src/uix/eidos/components/password-field/password-field.css. Provider is the inline-flex container; tokens are private (--_password-field-*). CapsLock indicator and StrengthMeter have their own data-* attribute states.

Selector	Owner	Purpose
`[data-password-field]`	morfo	Provider marker. Inline-flex container with border + focus ring.
`[data-password-field][data-size='xs'..'xl']`	eidos	Padding + font-size + radius scale.
`[data-password-field][data-color='primary'..'loss']`	eidos	Maps to focus accent token.
`[data-password-field][data-focused]`	morfo	Focus ring via box-shadow color-mix.
`[data-password-field-input]`	morfo	Input cell. Letter-spacing increased for legibility while masked.
`[data-password-field-visibility-trigger]`	morfo	Eye toggle button. Hover background + focus outline.
`[data-password-field-caps-lock-indicator][data-active]`	morfo	Risk-tinted pill, hidden when inactive.
`[data-password-field-strength-meter][data-strength='1'..'4']`	morfo	Active segments tint per strength bucket (loss / risk / fulfill / affirm).

{/if} {#if tab === 'a11y'}

Accessibility

Concern	Contract
Role	Native `<input>` with `type="password"` (or `"text"` when visible). Implicit `role="textbox"`.
Label	Defaults to translated 'Password' / 'Contraseña'. When inside a `<Field>` the Field.Label wins via `aria-labelledby`.
Autofill	`autocomplete="current-password"` (login) or `"new-password"` (registration / password change). Drives password manager behavior.
Visibility toggle	`<button type="button" aria-pressed={'{visible}'} aria-label="Show/Hide password">`. `tabindex="-1"` so it doesn't break the form's natural tab order — the user toggles via mouse / programmatic focus instead.
Caps Lock detection	Soma listens to keydown/keyup on the input and reads `KeyboardEvent.getModifierState('CapsLock')`. Indicator carries `role="status"` + `aria-live="polite"` so screen readers announce when Caps Lock turns on while typing.
Strength meter	`role="meter"` with `aria-valuemin=0`, `aria-valuemax=4`, `aria-valuenow`. Visual segments are `aria-hidden`; only the label is announced.
Keyboard	`Enter` fires `commit-submit`. No other keys hijacked — selection / cursor movement / paste all behave natively.
Disabled / readonly	Mirrored to native attributes AND ARIA. The visibility trigger also disables when the input is disabled.
Reduced motion	All transitions disabled under `prefers-reduced-motion: reduce`.

{/if}