Choice

Items-array mode input. Mutually exclusive with slotted children.

Uncontrolled initial selection.

Bindable selected value(s). Always an array, even for radio (length ≤ 1).

Visual appearance variant of the control.

Root container background. Defaults to `transparent`.

Root container border. Defaults to `none`.

Emphasis applied to every item in the group. The default depends on `group`: `"secondary"` (palette-tinted segments) when `group` is true so the merged control reads as one surface, otherwise `"tertiary"` — the quietest look, plain segments until selected. An explicit value always wins.

Wrap the items in a `Group` so they read as a single, merged control (shared dividers + flush outline). Best with `appearance="button"`.

Card appearance only: visually hide the radio/checkbox indicator.

Card appearance only: how each card shows its selection. `inline` puts the radio/checkbox in the header, `float` pins a check badge on the card's top-end corner, `none` relies on the accent border alone. The real input is kept for keyboard + a11y in every mode.

Root container shadow. Defaults to `none`.

Size variant.

Segmented (`appearance="button"`, `type="radio"`) only: paint the selection as one thumb that slides between segments instead of each segment filling itself. Uses CSS anchor positioning; browsers without it keep the static per-segment fill. Ignored for merged `group`s and checkbox groups. The thumb paints the checked segment's `tone`/`emphasis`: the group's, unless that item sets its own (a `tone="danger"` item slides in red).

Color tone. A semantic tone communicates status: `neutral`, `primary`, `success`, `warning`, `danger` (or `inherit`). Every component except Button also takes a color family such as `teal`, which carries no status meaning — for labels, people, categories and chart series — or `dynamic`, a family generated at runtime from a seed color (`@pindoba/core-tone`).

Lay items out in a CSS grid instead of the orientation's flex flow: - a number → that many equal columns (`repeat(n, minmax(0, 1fr))`). - `"auto"` → a responsive auto-fit grid that wraps as space allows. A horizontal segmented control (`appearance="button"`) never wraps, so there `"auto"` fills the row on one line instead (same as `fullWidth`). Unset keeps the flex flow (horizontal wraps, vertical stacks). Great for laying out cards.

Stretch the component to fill the available width.

Flow direction for the items — `horizontal` wraps, `vertical` stacks. Ignored when `columns` puts the group in a grid.

Root container padding. Defaults to `none`.

Root container corner radius. Defaults to `none`.

Disable every item in the group. Per-item `disabled` still applies on top, so a group left enabled can still contain individually disabled items.

Shared radio group name. Auto-generated when omitted.

Fired with the next selection whenever an item is toggled.

Selection model: `radio` for one-of-many, `checkbox` for any-of-many. Drives the control each item renders and the ARIA the group exposes.

Compound mode: `<ChoiceItem>` children. Mutually exclusive with `items`.

Bindable reference to the group's root element.

Per-slot style and attribute override bag for customizing the group's elements.

Astro / vanilla: serialize the props into `data-choice-config` so the client runtime hydrates this instance and `getPindoba(el, "choice")` can `update()` it. Astro sets it on every instance (a Choice is interactive by nature). Frameworks with their own reactivity don't need it.