<baht-section>

Section divider inside a form: heading plus rule, no value, no events.

Inside a form

A field with type "section" renders this element; text (or label) is the heading.

HTMLReactAngular

Copy

<baht-form></baht-form>

<script>
  const el = document.querySelector('baht-form');
  el.form = {
    "form_id": "sectioned",
    "form_name": "Sectioned",
    "fields": [
      {
        "order": 1,
        "type": "section",
        "key": "about",
        "text": "About you"
      },
      {
        "order": 2,
        "type": "text",
        "key": "name",
        "label": "Name",
        "width": "1/2"
      },
      {
        "order": 3,
        "type": "section",
        "key": "request",
        "text": "The request"
      },
      {
        "order": 4,
        "type": "textarea",
        "key": "why",
        "label": "Why",
        "rows": 2
      }
    ]
  };
</script>

As tabs

Set tab: true on a section and <baht-form> shows it as a tab, with text as the tab’s label. Fields before the first tab stay above the strip; a tab holds the fields up to the next tab section, and a plain section stays a heading inside its tab.

{ "order": 5, "type": "section", "key": "sec_planning", "text": "Planning", "tab": true }

Every field stays rendered, so rules, values and validate() still cover the whole form. When validate() finds errors that cannot be seen, the first tab with an error opens, and each tab shows how many it has. A tab with no visible field drops out of the strip. Read-only forms use the same tabs. Choosing a tab does not fire baht-change on the form; it fires baht-tab-change (detail: { value }), also when an error opens a tab. Set tab on <baht-form> to open one yourself.

Folding

Set collapsible: true and the heading becomes a button that folds the fields up to the next section; collapsed: true starts it folded. Folded fields stay in the data and in validate(), and an error inside unfolds the section.

Props

Name	Type	Default	Description
fieldJS	FieldDescriptor	—	Descriptor with type "section"; text or label is shown
collapsed	boolean	false	Folded right now.