<!-- Generated by npm run gen:skill from ui/ComboBox/skill.md - do not edit. -->

# ComboBox

## `<combobox>`

- `value`, `editable`, `subplate` (Name of a plate elsewhere in the view), `pattern`, `pattern-error`, `error-message`, `warning-message`, `success-message`, `min-length`, `max-length`
- Item attributes: `value`, `selected`, `title`, `colorbox`, `icon`
- actions: error, success, valid, warning
- events: Change, Focus, Init, Invalid, Select, Valid
- methods: clear

```xml
<panel type="rows" gap="10" padding="5">
  <combobox name="priority" label="Priority" width="160">
    <plate>
      <item colorbox="#22c55e" value="Low">Low</item>
      <item colorbox="#eab308" value="Medium" selected="true">Medium</item>
      <item colorbox="#ef4444" value="High">High</item>
    </plate>
  </combobox>
</panel>
```

## `<plate>`

- `sort`: ascending | descending | true | false
- `header`, `count`, `data`, `create`
- Item attributes: `value`, `selected`, `title`, `colorbox`, `icon`
- events: Change, Select
- methods: getText

## Guidance

- Items go in a child `<plate>`: `<item value="se">Sweden</item>`, or a `rule` in the plate, bound by the plate's `name`. Bind the combobox to where the choice is stored.
- `subplate="p"` shares a plate written outside the combobox; it stores the item's text, not its value.
- Change, then Select, fire on the combobox, never on the plate. `clear` empties only the shown text, writing nothing to the data. With inline items `value=` is ignored: mark the item `selected="true"`.
- Only an `editable="true"` one validates itself (empty, pattern, min-length) - once typed in, and again on each pick or setValue. A state an action sets (error, warning, success) stays until an action sets `valid`.
- `editable="true"`: typing filters the items; a typed text is stored, not added. An item with only an icon or `colorbox` needs a `title`.
