alice.pds.demo.boltless.dev
This repository has no description
1<script module lang="ts">
2 import { defineMeta } from "@storybook/addon-svelte-csf";
3 import Checkbox from "./Checkbox.svelte";
4
5 const { Story } = defineMeta({
6 title: "UI/Checkbox",
7 component: Checkbox,
8 tags: ["autodocs"],
9 argTypes: {
10 checked: { control: "boolean" },
11 indeterminate: { control: "boolean" },
12 disabled: { control: "boolean" }
13 },
14 args: {
15 checked: false,
16 indeterminate: false,
17 disabled: false
18 }
19 });
20</script>
21
22<!-- Checkbox content comes through its `children` snippet, provided here as Story slot content. -->
23<Story name="Default">Item</Story>
24<Story name="Checked" args={{ checked: true }}>Item</Story>
25<Story name="Indeterminate" args={{ indeterminate: true }}>Item</Story>
26<Story name="Disabled" args={{ disabled: true }}>Item</Story>
27<Story name="Disabled checked" args={{ disabled: true, checked: true }}>Item</Story>
28
29<Story name="States">
30 <div class="flex flex-col gap-3">
31 <Checkbox>Unchecked</Checkbox>
32 <Checkbox checked>Checked</Checkbox>
33 <Checkbox indeterminate>Indeterminate</Checkbox>
34 <Checkbox disabled>Disabled</Checkbox>
35 <Checkbox disabled checked>Disabled checked</Checkbox>
36 </div>
37</Story>