<baht-input>

Single-line text/email field. Controlled: feed value, listen to baht-input.

Basic

disabledreadonlyrequireddebounce

HTMLReactAngular

Copy

<baht-input></baht-input>

<script>
  const el = document.querySelector('baht-input');
  el.field = {
    "order": 1,
    "type": "text",
    "key": "firstName",
    "label": "First name",
    "placeholder": "Somchai"
  };
  el.value = "";
</script>

Required + error

HTMLReactAngular

Copy

<baht-input required="true"></baht-input>

<script>
  const el = document.querySelector('baht-input');
  el.field = {
    "order": 1,
    "type": "text",
    "key": "email",
    "label": "Email"
  };
  el.value = "not-an-email";
  el.error = "Invalid email address";
</script>

Props

Name	Type	Default	Description
fieldJS	FieldDescriptor	—	Field spec: { order, type, key, label?, placeholder?, options?, … }
valueJS	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>).
errorJS	string | null	null	Validation message to display
debounce	number | undefined	150 (BahtFieldBase.defaultDebounce)	Quiet time (ms) before typing reaches the host as baht-input. Blur flushes at once. 0 = every keystroke. <baht-form options.inputDebounce> sets it form-wide

Events

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