Component API

`<radio-pills>`

Single-select group of compact pill-shaped options — for many short,
same-shaped choices (a basemap style, a unit toggle). For a handful of
choices where a description matters, use radio-cards instead. Wraps
native radio inputs for keyboard/a11y and fires change rather than
relying on form submission.

Install

import "@f-ewald/components/radio-pills.js";

Usage

<radio-pills></radio-pills>
<script type="module">
  const el = document.querySelector("radio-pills");
  el.options = [
    { value: "light", label: "Light" },
    { value: "streets", label: "Streets" },
  ];
  el.value = "light";
  el.addEventListener("change", (e) => console.log(e.detail.value));
</script>

Attributes / properties

Property	Attribute	Type	Default	Description
`options`	JS property only	`RadioPillOption[]`	`[]`	Options to render, one pill each.
`value`	`value`	`string`	`""`	Currently selected value.
`disabled`	`disabled`	`boolean`	`false`	Disables every native radio in the group.

Events

Event	Description
`change`	A pill was selected; detail: { value }.

Slots

None.

CSS custom properties

Custom property
`--ui-border`
`--ui-focus-ring`
`--ui-font`
`--ui-font-size-sm`
`--ui-line-height-tight`
`--ui-primary`
`--ui-surface-muted`
`--ui-text`