<baht-radio>

Radio group from field.options; value is the option key.

Basic

<baht-radio></baht-radio>

<script>
  const el = document.querySelector('baht-radio');
  el.field = {
    "order": 1,
    "type": "radio",
    "key": "size",
    "label": "T-shirt size",
    "options": [
      {
        "key": "s",
        "label": "S"
      },
      {
        "key": "m",
        "label": "M"
      },
      {
        "key": "l",
        "label": "L"
      }
    ]
  };
  el.value = "m";
</script>

Card variant

field.variant = 'card' — selectable card per option, with an optional muted option.description. Accent border marks the checked card only.

<baht-radio></baht-radio>

<script>
  const el = document.querySelector('baht-radio');
  el.field = {
    "order": 1,
    "type": "radio",
    "key": "method",
    "label": "Upload method",
    "variant": "card",
    "options": [
      {
        "key": "upload",
        "label": "Upload file",
        "description": "We will read it for you"
      },
      {
        "key": "manual",
        "label": "Enter manually",
        "description": "No file needed"
      }
    ]
  };
  el.value = "upload";
</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
`name`	CustomEvent
`baht-input`	`{ key, value }`	Fired on every user edit