<baht-select>

Single-choice dropdown from field.options. Renders its own listbox (light DOM, tokens) instead of the native <select> — identical on iOS/macOS, no OS picker. APG select-only combobox: arrows, Home/End, Enter/Space, Escape, type-to-select.

Basic

<baht-select></baht-select>

<script>
  const el = document.querySelector('baht-select');
  el.field = {
    "order": 1,
    "type": "dropdown",
    "key": "plan",
    "label": "Plan",
    "placeholder": "Choose a plan",
    "options": [
      {
        "key": "free",
        "label": "Free"
      },
      {
        "key": "pro",
        "label": "Pro, ฿20/mo"
      },
      {
        "key": "team",
        "label": "Team"
      }
    ]
  };
  el.value = null;
</script>

Option descriptions

An option’s description renders as a muted second line under its label in the list, and after the label on the closed trigger while that option is selected — room for a budget left, a balance, a hint.

With descriptions

<baht-select></baht-select>

<script>
  const el = document.querySelector('baht-select');
  el.field = {
    "order": 1,
    "type": "dropdown",
    "key": "category",
    "label": "Category",
    "options": [
      {
        "key": "food",
        "label": "Food",
        "description": "฿580 left"
      },
      {
        "key": "transport",
        "label": "Transport",
        "description": "฿1,200 left"
      },
      {
        "key": "other",
        "label": "Other"
      }
    ]
  };
  el.value = "food";
</script>

Props

Name	Type	Default	Description
`field`JS	`FieldDescriptor`	`—`	Field spec: { order, type, key, label?, placeholder?, options?, … }
`value`JS	`unknown`	`null`	Controlled value. Re-feed on every baht-input
`disabled`	`boolean`	`false`	Disable the control
`readonly`	`boolean`	`false`	Read-only
`required`	`boolean`	`false`	Show required mark
`show-optional`	`boolean`	`false`	Append the localized "(optional)" marker to the label when not required (set by <baht-form show-optional>).
`error`JS	`string \| null`	`null`	Validation message to display
`debounce`	`number \| undefined`	`—`	Debounce for typed edits (ms); unset = BahtFieldBase.defaultDebounce.

Events

Event	detail	Description
`baht-input`	`{ key, value }`	Fired on every user edit
`name`	CustomEvent