SwatchGroup — Loidolt Theme

import { SwatchGroup } from '@loidolt/theme-svelte';

Example

Accent color

Each swatch is a native radio with a visually hidden input, so keyboard and form semantics come from the platform.
Name every color via label when the value alone would not identify it.

Generated from the component source, so it cannot drift from the implementation.

SwatchGroup props
Prop	Type	Default	Notes
`options` required	`SwatchOption<T>[]`	`—`
`class`	`string`	`—`
`disabled`	`boolean`	`false`
`label`	`string`	`—`	Visible group label, rendered as a `<legend>`.
`name`	`string`	`$props.id()`	Shared `name` for the radios. Defaults to an SSR-stable generated id.
`onValueChange`	`(value: T) => void`	`—`
`ref` bindable	`HTMLFieldSetElement \| null`	`null`
`size`	`'sm' \| 'md'`	`'md'`
`value` bindable	`T`	`—`

Plus the attributes of HTMLFieldsetAttributes, forwarded to the root element.