UI Elements
ToggleGroup
A collection of toggle buttons that allows users to select one or multiple options.
Anatomy
The class attribute values represent part names. Other attributes represent their corresponding props.
Svelte
<span class="whole" aria-describedby={ariaDescId} aria-errormessage={ariaErrMsgId}>
{#each options as { value, text }}
<button class="main" use:action>
{text} or {children}
</button>
{/each}
</span>Props
Type
(value) indicates the default value for the prop.
TypeScript
interface ToggleGroupProps {
options: SvelteMap<string, string> | Map<string, string>;
children?: Snippet<[string, string, string]>; // Snippet<[value,text,variant]>
values?: string[]; // bindable
multiple?: boolean; // (true)
ariaDescId?: string;
ariaErrMsgId?: string; // bindable
action?: Action;
elements?: HTMLButtonElement[]; // bindable
styling?: SVSClass;
variant?: string; // bindable (VARIANT.NEUTRAL)
}Additional Props
values- The values of the currently selected toggle buttonsmultiple- When true, toggle buttons behave like checkboxes; otherwise, they behave like radio buttons
Styling
To learn more, see Styling.
Variant Management
Selected buttons will have the active variant applied. Others are not automatically switched.
Default Class Name
svs-toggle-group
Exports
Types
TypeScript
type ToggleGroupReqdProps = "options";
type ToggleGroupBindProps = "values" | "ariaErrMsgId" | "elements" | "variant";Others
No additional exports are available.
Examples
The example code uses Tailwind CSS along with SVSClass.
Basic
With Interactive Variant
Preset for Demo
Enter variant as you like