diff --git a/docs/src/pages/components/Toggle.svx b/docs/src/pages/components/Toggle.svx index 1b2b8e47..a2ff3a1e 100644 --- a/docs/src/pages/components/Toggle.svx +++ b/docs/src/pages/components/Toggle.svx @@ -7,35 +7,47 @@ components: ["Toggle", "ToggleSkeleton"] import Preview from "../../components/Preview.svelte"; +`Toggle` provides a switch-like control that allows users to turn options on or off. It supports custom labels, different sizes, and various states to match your application's needs. + ## Default (untoggled) +Display a basic toggle with a label. + ## Toggled +Set `toggled` to `true` to display the toggle in its on state. + ## Reactive example +Use two-way binding to control the toggle state programmatically. + ## on:toggle event +Listen for toggle state changes using the `on:toggle` event. + console.log(e.detail)} /> ## Hidden label text -Set `hideLabel` to `true` to visually hide the label text. It's recommended to still specify `labelText` for screen reader accessibility. +Set `hideLabel` to `true` to visually hide the label while maintaining accessibility. ## Custom labels +Customize the toggle labels using `labelA` and `labelB` props. + ## Slottable labels -An alternative to the "labelA" and "labelB" props is to use the corresponding named slots. +Use slots to customize the toggle labels with additional styling or content. No @@ -44,16 +56,24 @@ An alternative to the "labelA" and "labelB" props is to use the corresponding na ## Disabled state +Set `disabled` to `true` to prevent user interaction. + ## Small size +Use the small size variant by setting `size` to `"sm"`. + ## Skeleton +Display a loading state using the skeleton component. + ## Skeleton (small) +Use the small size variant for the skeleton component. + \ No newline at end of file