Toggle
<ts-toggle> vv0.4.0
The ts-toggle component.
Open in Storybook for interactive demos.
Preview
Section titled “Preview”<ts-toggle size="md">Content</ts-toggle>Properties
Section titled “Properties”| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
checked | checked | boolean | false | Whether the toggle is checked. |
disabled | disabled | boolean | false | Renders the toggle as disabled. |
name | name | string | undefined | — | Name for form submission. |
size | size | "lg" | "md" | "sm" | "xl" | "xs" | 'md' | The toggle’s size. |
value | value | string | undefined | — | Value for form submission. |
Events
Section titled “Events”| Event | Detail | Bubbles | Composed | Description |
|---|---|---|---|---|
tsChange | TsToggleEventDetail | Yes | Yes | Emitted when the toggle state changes. |
Methods
Section titled “Methods”| Method | Signature | Description |
|---|---|---|
toggle | toggle() => Promise<void> | Programmatically toggle the checked state. |
| Name | Description |
|---|---|
*(default)* | Default slot for the toggle label. |
CSS Parts
Section titled “CSS Parts”Use ::part() to style internal elements:
| Part | Description |
|---|---|
base | The toggle container. |
label | The label wrapper. |
thumb | The toggle thumb/knob. |
track | The toggle track. |
ts-toggle::part(base) { /* your custom styles */}<ts-toggle size="md">Content</ts-toggle>import { TsToggle } from '@tessera-ui/react';
<TsToggle size="md">Content</TsToggle>