PillChoiceGroup

Usage

Focus
Calm
Energy

Svelte

<script>
	import { PillChoiceGroup } from 'bref-ui';
	const items = [
		{ id: 'focus', label: 'Focus' },
		{ id: 'calm', label: 'Calm' }
	];
	let selection = $state('focus');
</script>

<PillChoiceGroup {items} aria-label="Mood" bind:selection />

Playground

View generated code

Svelte

<script lang="ts">
	import { PillChoiceGroup } from 'bref-ui';
	import type { PillDataProps } from 'bref-ui/types';
	let items = $state<PillDataProps[]>([
		{
			id: 'focus',
			label: 'Focus',
			icon: {
				name: 'center_focus_strong'
			}
		},
		{
			id: 'calm',
			label: 'Calm'
		},
		{
			id: 'energy',
			label: 'Energy'
		}
	]);
	let selection = $state<string | string[]>('focus');
	const remove = (id: string) => {
		items = items.filter((item) => item.id !== id);
		selection = Array.isArray(selection)
			? selection.filter((selected) => selected !== id)
			: selection === id
				? ''
				: selection;
	};
</script>

<PillChoiceGroup
	{items}
	bind:selection
	aria-label="Interactive choices"
	size="medium"
	variant="neutral"
	color="foreground"
	disabled={false}
	glass={false}
	animateSelected={false}
	onDelete={remove}
/>
<p role="status">
	Selected: {Array.isArray(selection) ? selection.join(', ') || 'none' : selection || 'none'}
</p>

Native selection and form reset

Animated choices

Focus
Calm
Energy

Props and native behavior

PillChoiceGroup props
Prop	Type	Required	Default	Description
`items`	`readonly PillDataProps[]`	Yes	`—`	Choices with unique IDs and visible labels; icons are optional.
`selection`	`string \| string[]`	Yes	`—`	Bindable ID for radio choice, or IDs for checkboxes.
`disabled`	`boolean`	No	`false`	Disable every choice.
`onDelete`	`(id: string) => void`	No	`Omitted`	Show delete buttons and report the item ID; the consumer updates items and selection.
`size`	`Size`	No	`medium`	Pill size.
`variant`	`Exclude<Variant, 'filled'>`	No	`neutral`	Neutral selects soft; soft selects filled.
`color`	`Exclude<Color, 'background'>`	No	`foreground`	Theme role for every pill, including selected choices.
`animateSelected`	`boolean`	No	`false`	Enable the pill highlight animation.
`glass`	`boolean`	No	`false`	Translucent paint and backdrop blur for the choices.

Supply aria-label or aria-labelledby for the group name. A string selection uses native radio behavior; an array uses checkboxes. Tab and arrow keys navigate radios; Space toggles focused checkboxes.

Usage

Playground

Live preview

Settings

Native selection and form reset

neutral

soft

Props and native behavior