Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687<script module lang="ts"> import { defineMeta } from "@storybook/addon-svelte-csf"; import Field from "./Field.svelte"; import Select from "./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>
<!-- Field wraps any form control via its `children` snippet. --><Story name="Default"> {#snippet template(args)} <Field {...args} for="field-default"> <input id="field-default" type="text" placeholder="Placeholder" class="w-full rounded border border-border-default bg-background-default px-3 py-2 text-sm outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong" /> </Field> {/snippet}</Story>
<Story name="LabelOnly" args={{ subtitle: undefined }}> {#snippet template(args)} <Field {...args} for="field-label-only"> <input id="field-label-only" type="text" placeholder="Placeholder" class="w-full rounded border border-border-default bg-background-default px-3 py-2 text-sm outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong" /> </Field> {/snippet}</Story>
<Story name="Required" args={{ required: true }}> {#snippet template(args)} <Field {...args} for="field-required"> <input id="field-required" type="text" placeholder="Placeholder" class="w-full rounded border border-border-default bg-background-default px-3 py-2 text-sm outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong" /> </Field> {/snippet}</Story>
<Story name="WithSelect"> {#snippet template(args)} <Field {...args} for="field-select"> <Select id="field-select"> <option value="" disabled selected>Select</option> <option value="one">One</option> <option value="two">Two</option> </Select> </Field> {/snippet}</Story>
<Story name="WithInput"> {#snippet template(args)} <Field {...args} for="field-input"> <input id="field-input" type="text" placeholder="Placeholder" class="w-full rounded border border-border-default bg-background-default px-3 py-2 text-sm outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong" /> </Field> {/snippet}</Story>