Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849<script module lang="ts"> import { defineMeta } from "@storybook/addon-svelte-csf"; import Field from "$lib/components/ui/Field.svelte"; import Select from "$lib/components/ui/Select.svelte";
const { Story } = defineMeta({ title: "UI/Field", component: Field, tags: ["autodocs"], argTypes: { label: { control: "text" }, subtitle: { control: "text" }, required: { control: "boolean" } }, args: { label: "Label", subtitle: "Subtitle", required: false } });</script>
<!-- The snippet goes through `args` like any other prop, which also keeps it out of the controls' way. -->{#snippet textInput({ id }: { id: string })} <input {id} type="text" placeholder="Placeholder" class="w-full rounded-sm border border-border-default bg-background-default px-3 py-2 typography-paragraph-small outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong" />{/snippet}
{#snippet select({ id }: { id: string })} <Select {id} placeholder="Select" options={[ { value: "one", label: "One" }, { value: "two", label: "Two" } ]} />{/snippet}
<Story name="Default" args={{ children: textInput }} /><Story name="LabelOnly" args={{ subtitle: undefined, children: textInput }} /><Story name="Required" args={{ required: true, children: textInput }} /><Story name="WithSelect" args={{ children: select }} />