# Source: `components/velin-otp-input.js` ## Minimal working example Copy-paste starter (load CSS + `velinstyle-components` / `bootFromDOM` as needed): ```html ``` _Example from design-intelligence knowledge SoT (`core/meta/knowledge/components.json`)._ ## Accessibility WCAG contract status: **pass** (framework target: AAA). - **Roles:** `group` - **Keyboard:** Digits, arrows, backspace, paste - **Notes:** autocomplete one-time-code on first digit. ## Attributes | Attribute | Notes | | --- | --- | | `length` | Observed — triggers `attributeChangedCallback` when changed | | `value` | Observed — triggers `attributeChangedCallback` when changed | | `disabled` | Observed — triggers `attributeChangedCallback` when changed | | `name` | Observed — triggers `attributeChangedCallback` when changed | | `autocomplete` | Observed — triggers `attributeChangedCallback` when changed | | `label` | Observed — triggers `attributeChangedCallback` when changed | ## Events - `velin-change` (bubbles) - `velin-complete` (bubbles) ## CSS parts - `digit` - `group` ## Slots _None._ ## Public API | Kind | Name | | --- | --- | | Method | `focus()` | | Property | `value` | | Property | `value (setter)` | ## Related resources - Generated API docs (canonical): [`velin-otp-input.md`](./velin-otp-input.md) - Generated index: [README.md](./README.md) - CLI API: `npx velinstyle wc api velin-otp-input` - Atelier library (showcases — **not** a 1:1 Component map): `atelier/library/index.html`