Secure field 1.2.2

Demo only. Client-side encoding is not encryption.

Optional client-side encoding for form fields via <velin-secure-field> — a transport helper only. TLS and server-side crypto remain required in production. Deutsch: Sicheres Feld

Maturity: Documented as stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) is separate and beta / foundation where noted.

When to use

Demo or prototype flows that need a labelled input emitting an encoded payload on change.
Opt-in via the @birdapi/velinstyle/secure subpath when you deliberately keep it out of the default bundle.

When not

Never treat client encoding as encryption, password storage, or secret management.
Do not use it instead of HTTPS, CSRF protection, or server validation.
Prefer ordinary .velin-form-control inputs for normal forms; pair errors with Form summary.

Demo only. Client-side encoding is not encryption. Never store passwords or API keys in the browser.

Example

<velin-secure-field type="email" name="contact" label="Email" autocomplete="email"></velin-secure-field>

<script type="module">
  import '@birdapi/velinstyle/secure';
</script>

Not in the default IIFE bundle — import the ./secure package export to keep the main bundle small. Default mode is aes-gcm when Web Crypto is available; otherwise the payload falls back to base64 encoding.

Attributes

Attribute	Default	Notes
`type`	sanitized input type	Passed to the inner `<input>`
`name`	`secure`	Included in event `detail.name`
`label`	`Secure field`	Visible label text
`mode`	`aes-gcm`	Encoding mode for the payload
`autocomplete`	`off`	Forwarded to the input

CSS part: input.

Events

Event	Detail
`velin-secure-submit`	`{ name, payload }` — fired on input `change`

Native <label for> association with the shadowed textbox (part="input").
Focus-visible outline uses the framework focus token.
Help text under the field states that encoding is demo-only.

Contract status: pass.

Email (reveal / obfuscation)
Form summary
Security
Form control