<!-- Auto-generated by `velinstyle docs generate`. Do not edit. Source: components/velin-secure-field.js -->

# <velin-secure-field>

Source: `components/velin-secure-field.js`

## Minimal working example
Copy-paste starter (load CSS + `velinstyle-components` / `bootFromDOM` as needed):

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

_Example derived from human component docs (`exampleSource: human-doc`; fail-closed extract — not a second SoT)._

## Accessibility
WCAG contract status: **pass** (framework target: AAA).

- **Roles:** `textbox`
- **Notes:** Native label association.

## Attributes
| Attribute | Notes |
| --- | --- |
| `type` | Observed — triggers `attributeChangedCallback` when changed |
| `name` | Observed — triggers `attributeChangedCallback` when changed |
| `label` | Observed — triggers `attributeChangedCallback` when changed |
| `mode` | Observed — triggers `attributeChangedCallback` when changed |
| `autocomplete` | Observed — triggers `attributeChangedCallback` when changed |
## Events
- `velin-secure-submit` (bubbles)
## CSS parts
- `input`
## Slots
_None._
## Public API
| Kind | Name |
| --- | --- |
| Method | `render()` |
## Related resources
- Generated API docs (canonical): [`velin-secure-field.md`](./velin-secure-field.md)
- Generated index: [README.md](./README.md)
- CLI API: `npx velinstyle wc api velin-secure-field`
- Human docs EN (tutorial): `docs/components/secure-field.html`
- Human docs DE (tutorial, lang-map): `docs/components/sicheres-feld.html`
- Atelier showcase (DIRECT CE match, `51-password-reset`): `atelier/library/showcases/51-password-reset/index.html`
- Atelier library (showcases — **not** a 1:1 Component map): `atelier/library/index.html`