# OTP Input

[component-header:sl-otp-input]

Otp inputs can be used for letting users enter a numeric code. Typically used for sign in forms.


```html preview
<sl-otp-input id="otp" style="max-width: 600px;"></sl-otp-input>

<script>
    const el = document.getElementById('otp');
    el.addEventListener('valueChange', (ev) => console.log(ev.detail));
</script>
```

### Error Text

Add descriptive error text to the with the `error-text`-attribute. For error texts that contain HTML, use the `error-text`-slot instead. When an error text is supplied the help text will be hidden.

```html preview
  <sl-otp-input
    error-text="The entered value is invalid"
  ></sl-otp-input>
```

[component-metadata:sl-otp-input]