← Back to documentation
Switch
A component that acts in a similar way to a checkbox but looks different.
Information
Plan: Personal
Properties
| Property | Type | Default |
|---|---|---|
| Checked | boolean | false |
| Text | string | "Text" |
| ID | string | "" |
| Width | string | "auto" |
| Minimum width | string | "auto" |
| Maximum width | string | "none" |
| Height | string | "auto" |
| Minimum height | string | "auto" |
| Maximum height | string | "none" |
| Background color | string | "var(--pc-semantic-surface-base)" |
| Background color - Active | string | "var(--pc-semantic-interactive-primary)" |
| Border color | string | "var(--pc-semantic-border-default)" |
| Transition | string | "0.25s ease" |
| Selectors | array | [] |
Variants
| Variant | Description |
|---|---|
| Dark | Coming soon... |