<baht-filter>

Filter chip group. Controlled: feed selected, listen to baht-change.

Multiple (default)

<baht-filter></baht-filter>

<script>
  const el = document.querySelector('baht-filter');
  el.options = [
    {
      "key": "open",
      "label": "Open"
    },
    {
      "key": "closed",
      "label": "Closed"
    },
    {
      "key": "mine",
      "label": "Assigned to me"
    }
  ];
  el.selected = [
    "open"
  ];
</script>

Segmented

variant="segmented" draws the options as one joined segmented control: a single bordered group with the control radius, the active segment filled with the ink colour. Selection logic is the same as chips; pair it with multiple="false" for a period switch. A segmented control always holds one value, so clicking the active segment does nothing (no baht-change) instead of clearing it.

Segmented

<baht-filter variant="segmented" multiple="false" label="Period"></baht-filter>

<script>
  const el = document.querySelector('baht-filter');
  el.options = [
    {
      "key": "week",
      "label": "Week"
    },
    {
      "key": "month",
      "label": "Month"
    },
    {
      "key": "year",
      "label": "Year"
    }
  ];
  el.selected = [
    "month"
  ];
</script>

Props

Name	Type	Default	Description
`options`JS	`FieldOption[]`	`[]`	{ key, label } chips
`selected`JS	`string[]`	`[]`	Active keys
`variant`	`FilterVariant`	`'chips'`	'chips' = separate pills; 'segmented' = one joined segmented control (never clears in single mode)
`multiple`	`boolean`	`true`	false = radio behavior
`disabled`	`boolean`	`false`	Disable
`label`	`string`	`'Filters'`	Accessible name for the chip group.

Events

Event	detail	Description
`baht-change`	`{ selected: string[] }`	Selection changed
`name`	CustomEvent