{% props field: Field, label: String = "", description: Slot = Slot::default(), length: i64 = 6, groups: String = "3,3" %}
{#- One real input, so paste and SMS autofill work; the otp controller draws the slots (`groups`: "3,3", "4,4", "2,2,2") over it. -#}
{%- let label = if label.is_empty() { field.label.clone() } else { label } %}
{%- let note = if field.has_errors() { format!("{}-error", field.id) } else { format!("{}-description", field.id) } %}
{%- let described = field.has_errors() || !description.to_html().trim().is_empty() %}
<div class="ui-field" data-ui="otp" data-groups="{{ groups }}">
<label class="ui-label" for="{{ field.id }}">{{ label }}</label>
<input class="ui-otp-native" id="{{ field.id }}" name="{{ field.name }}" value="{{ field.value }}" inputmode="numeric" autocomplete="one-time-code" pattern="[0-9]*" maxlength="{{ length }}"{% if described %} aria-describedby="{{ note }}"{% end %}{% if field.has_errors() %} aria-invalid="true"{% end %}>
{%- if field.has_errors() %}
<p class="ui-field-error" id="{{ field.id }}-error">{%- for message in field.errors.iter() %}{{ label }} {{ message }}. {% end %}</p>
{%- else %}{% if described %}
<p class="ui-field-description" id="{{ field.id }}-description">{{ description }}</p>
{%- end %}{% end %}
</div>