Toggle Group
A group of two-state buttons that can be used to select one or more options.
Default
The standard toggle group component.
toggle-group-example-default.ts
Installation & Usage
Installation
Imports
Basic Skeleton
Examples
Colors
Customize toggle group items with Tailwind CSS classes to create themed selections.
Success Theme
Destructive Theme
Info Theme
toggle-group-example-colors.ts
Outline
toggle-group-example-outline.ts
Single Selection
toggle-group-example-single.ts
Sizes
Small (size="sm")
Large (size="lg")
toggle-group-example-size.ts
Disabled
toggle-group-example-disabled.ts
Spacing
toggle-group-example-spacing.ts
Reactive Forms
toggle-group-example-form.ts
API Reference
Helm API
The Helm component provides the spartan/ui styling for the toggle group.
| Directive | Selector | Description |
|---|---|---|
| HlmToggleGroupDirective | [hlmToggleGroup] | Main directive for the toggle group container. |
| HlmToggleGroupItemDirective | [hlmToggleGroupItem] | Directive for each item within the toggle group. |
Brain API
The Brain component handles the logic and accessibility for the toggle group.
| Property | Type | Description |
|---|---|---|
| type | 'single' | 'multiple' | Whether single or multiple items can be selected. |
| value | any | The current value(s) of the toggle group. |
| disabled | boolean | Whether the toggle group is disabled. |