<!-- Generated by npm run gen:skill from ui/Input/skill.md - do not edit. -->

# Input

## `<input>`

- `type`: password | new-password | numeric | date | time | datetime-local
- `value`, `default`, `required`, `pattern`, `pattern-error`, `error-message`, `warning-message`, `success-message`, `min-length`, `length`, `min` (YYYY-MM-DD, HH:MM, today()), `max` (YYYY-MM-DD, HH:MM, today()), `step`, `editable`, `autocomplete`, `focus`, `icon`, `toggleable`, `clearsearch`
- actions: error, success, valid, warning
- events: Blur, Change, Enter, Escape, Focus, IconSelect, Invalid, Select, Valid
- methods: activate, clear

```xml
<panel type="rows" gap="10" padding="5">
  <input name="code" label="Code" placeholder="Three letters" required="true" pattern="[A-Za-z]{3}"
      pattern-error="Exactly three letters, no numbers" width="180"/>
</panel>
```

## Guidance

- Bound, it writes back on commit: Change fires on blur or Enter (at once for a picked date or time), not per key.
- Date and time values are `YYYY-MM-DD`, `HH:MM` and `YYYY-MM-DDTHH:MM`, whatever the locale shows; `today()` works in value, min and max.
- Validation: `required`, `pattern` + `pattern-error`, `min-length`, `length`. A state a process sets stays until a process sets another one or `valid`; the built-in checks only move their own error.
- `editable="false"` is read-only; `focus="true"` on at most the first field. `clearsearch`'s "x" does not show yet (known issue).
- `icon`: name it with `title`, its only accessible name.
