blob: a693f691c27b060e39ba7f7b056ed012009c304e (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<script lang="ts">
import Input from "$lib/components/input.svelte";
import { DatabaseIcon } from "$lib/components/icons";
</script>
<section>
<h2>Default</h2>
<Input label="Input me" placeholder="Hello" />
</section>
<section>
<h2>With icon</h2>
<Input label="Input me" placeholder="Hello" icon={DatabaseIcon} />
</section>
<section>
<h2>With corner hint</h2>
<Input label="Input me ->" placeholder="Hello" cornerHint="Hint hint" />
</section>
<section>
<h2>Disabled</h2>
<Input label="No" placeholder="Sorry" disabled />
</section>
<section>
<h2>Errored</h2>
<Input
label="No"
placeholder="Sorry"
errorText="That's not right"
icon={DatabaseIcon}
/>
</section>
<section>
<h2>Help</h2>
<Input label="Go ahead" placeholder="Write here" helpText="Write above" />
</section>
<section>
<h2>Addon</h2>
<Input
label="Go ahead"
placeholder="Write here"
helpText="Write above"
addon="To the right"
/>
</section>
|
