SwitchGroup
<ts-switch-group> vv0.4.0
The ts-switch-group component.
Open in Storybook for interactive demos.
Preview
Section titled “Preview”<ts-switch-group size="md">Content</ts-switch-group>Properties
Section titled “Properties”| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
disabled | disabled | boolean | false | Disables the entire group. |
fullWidth | full-width | boolean | false | Stretch to fill the container width. |
size | size | "lg" | "md" | "sm" | "xl" | "xs" | 'md' | The size of the switch group. |
value | value | string | undefined | — | The currently active segment value. |
Events
Section titled “Events”| Event | Detail | Bubbles | Composed | Description |
|---|---|---|---|---|
tsChange | { value: string; } | Yes | Yes | Emitted when the active value changes. |
| Name | Description |
|---|---|
*(default)* | Default slot for ts-switch-option children. |
CSS Parts
Section titled “CSS Parts”Use ::part() to style internal elements:
| Part | Description |
|---|---|
base | The switch group container. |
ts-switch-group::part(base) { /* your custom styles */}<ts-switch-group size="md">Content</ts-switch-group>import { TsSwitchGroup } from '@tessera-ui/react';
<TsSwitchGroup size="md">Content</TsSwitchGroup>