Switch
<pc-switch> Switches allow the user to toggle an option on or off.
<pc-switch>Switch</pc-switch>This component works well with standard <form> elements. Please refer to the form controls page to learn more about form submission and client‐side validation.
Use the checked attribute to set the switch’s state to enabled.
Use the disabled attribute to disable the switch.
Use the size attribute to change a switch’s size.
Add a descriptive hint to a switch with the hint attribute. For hints that contain HTML, use the hint slot instead.
Use the available custom properties to change how the switch is styled.
| Name | Description | Reflects | Default |
|---|---|---|---|
name | The name of the switch, submitted as a name/value pair with form data. Type: string |
| "" |
value | The current value of the switch, submitted as a name/value pair with form data. Type: string | null |
| ‐ |
size | The switch’s size. Type: "small" | "medium" | "large" |
| "medium" |
disabled | Disables the switch. Type: boolean |
| false |
checked | Checks the switch off. Type: boolean |
| false |
defaultCheckedchecked | The default value of the switch. Primarily used for resetting the switch. Type: boolean |
| ‐ |
required | Makes the switch a required field. Type: boolean |
| false |
hint | The switch’s hint. if you need to display HTML, use the hint slot instead.Type: string |
| "" |
updateComplete | A read‐only promise that resolves when the component has finished updating. | ‐ |
Learn more about customising animations.
| Name | Description |
|---|---|
| (default) | The switch’s label. |
hint | Text that describes how to use the switch. Alternatively, you can use the hint attribute. |
Learn more about using slots.
| Name | Description | Arguments |
|---|---|---|
click() | Simulates a click on the switch. | ‐ |
focus() | Focuses the switch. | options: FocusOptions |
blur() | Unfocuses the switch (i.e., blurs it). | ‐ |
Learn more about methods.
| Name | Description | Event detail |
|---|---|---|
change | Emitted when the switch’s state changes. | Event |
input | Emitted when the switch receives input. | InputEvent |
focus | Emitted when the switch gains focus. | ‐ |
blur | Emitted when the switch loses focus (i.e., is blurred). | ‐ |
pc-invalid | Emitted when the form control has been checked for validity and its constraints aren’t satisfied. | ‐ |
Learn more about events.
| Name | Description | Default |
|---|---|---|
--width | The width of the switch. | calc(var(--height) * 1.75) |
--height | The height of the switch. | var(--pc-form-control-toggle-size) |
--thumb-size | The size of the thumb. | 0.75em |
Learn more about customising custom properties.
| Name | Description |
|---|---|
base | The component’s base wrapper. |
control | The control that houses the switch’s thumb. |
thumb | The switch’s thumb. |
label | The switch’s label. |
hint | The hint’s wrapper. |
Learn more about customising CSS parts.
If you’re using the autoloader or the standard loader, you can skip this section. But if you’re cherry picking, you can use any of the following snippets to import this component.
To manually import this component from the CDN, copy this code snippet and paste it in your HTML.
<script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.4/cdn/components/switch/switch.js"></script>To manually import this component from the CDN, copy this code snippet and paste it in your JavaScript file.
import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.4/cdn/components/switch/switch.js";To manually import this component from npm, copy this code snippet and paste it in your JavaScript file.
import "placer-toolkit/dist/components/switch/switch.js";