slipnote.app
Built for people who think better out loud.
input: Add component
isaaccorbrey.com
+38
+20
src/components/Input.stories.svelte
+20
src/components/Input.stories.svelte
···
1
+
<script module>
2
+
import { defineMeta } from "@storybook/addon-svelte-csf";
3
+
import Input from "./Input.svelte";
4
+
5
+
const { Story } = defineMeta({
6
+
title: "Components/Input",
7
+
component: Input,
8
+
argTypes: {
9
+
type: { control: "select", options: ["text", "email", "password", "search"] },
10
+
placeholder: { control: "text" },
11
+
disabled: { control: "boolean" },
12
+
value: { control: "text" },
13
+
},
14
+
});
15
+
</script>
16
+
17
+
<Story
18
+
name="Input"
19
+
args={{ type: "text", placeholder: "Type something...", disabled: false, value: "" }}
20
+
/>
+18
src/components/Input.svelte
+18
src/components/Input.svelte
···
1
+
<script lang="ts">
2
+
import type { HTMLInputAttributes } from "svelte/elements";
3
+
let { class: className = "", ...props }: HTMLInputAttributes = $props();
4
+
</script>
5
+
6
+
<input
7
+
{...props}
8
+
class="
9
+
px-3 py-px font-base bg-slate-950/7
10
+
border-s-slate-950 rounded-md
11
+
border-l-4 border-t-4 border-r border-b
12
+
shadow-[inset_-1px_-1px_3px_rgba(15,23,42,0.85)]
13
+
focus-visible:outline-none focus-visible:border-blue-700
14
+
focus-visible:shadow-[inset_-1px_-1px_3px_rgb(15,23,42)]
15
+
transition-all motion-reduce:transition-none duration-60
16
+
{className}
17
+
"
18
+
/>