Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445<script module lang="ts"> import { defineMeta } from "@storybook/addon-svelte-csf"; import Toggle from "./Toggle.svelte";
const { Story } = defineMeta({ title: "UI/Toggle", component: Toggle, tags: ["autodocs"], argTypes: { checked: { control: "boolean" }, disabled: { control: "boolean" }, layout: { control: "inline-radio", options: ["inline", "block"] } }, args: { checked: false, disabled: false, layout: "inline" } });</script>
<!-- Toggle content comes through its `children` snippet, provided here as Story slot content. --><Story name="Default">Label</Story><Story name="Checked" args={{ checked: true }}>Label</Story><Story name="Disabled" args={{ disabled: true }}>Label</Story><Story name="Disabled checked" args={{ disabled: true, checked: true }}>Label</Story>
<Story name="Without label" />
<Story name="States"> <div class="flex flex-col gap-3"> <Toggle>Unchecked</Toggle> <Toggle checked>Checked</Toggle> <Toggle disabled>Disabled</Toggle> <Toggle disabled checked>Disabled checked</Toggle> </div></Story>
<Story name="Block layout"> <div class="flex w-64 flex-col gap-3"> <Toggle layout="block">Label pushed to the far edge</Toggle> <Toggle layout="block" checked>Another one, wrapping when the text runs long</Toggle> </div></Story>