Skip to content

Commit 0bfbe34

Browse files
committed
add tags input
1 parent cc7d22c commit 0bfbe34

File tree

1 file changed

+38
-1
lines changed

1 file changed

+38
-1
lines changed

USAGE.md

+38-1
Original file line numberDiff line numberDiff line change
@@ -50,4 +50,41 @@
5050
</script>
5151

5252
<Field name="steps" as={StepCounter} />
53-
```
53+
```
54+
55+
### Svelte-Tags-Input
56+
57+
A small wrapper around [agustinl/svelte-tags-input](https://github.com/agustinl/svelte-tags-input).
58+
59+
[Open in REPL](https://svelte.dev/repl/d7845c3d47fa4c5a903f48bb65b00c16?version=3)
60+
61+
**TagsInput.svelte**
62+
63+
```html
64+
<script>
65+
import Tags from 'svelte-tags-input'
66+
67+
export let field
68+
const { name, handleInput } = field
69+
70+
function handleTags({ detail: { tags } }) {
71+
handleInput({ target: { name, value: tags } })
72+
}
73+
</script>
74+
75+
<Tags on:tags={handleTags} tags={field.value} {name} />
76+
```
77+
78+
**App.svelte**
79+
80+
```html
81+
<script>
82+
import { Sveltik, Field } from 'sveltik'
83+
84+
import TagsInput from './TagsInput.svelte'
85+
</script>
86+
87+
<Sveltik initialValues={{ tags: ['one', 'two'] }}>
88+
<Field name="tags" as={TagsInput} />
89+
</Sveltik>
90+
```

0 commit comments

Comments
 (0)