Input
Captures user input.
$ import { Input } from 'geist-ui-svelte'; Basic
Disabled / Readonly
Width
Use the `width` attribute to adjust the width of the input.
Size
Use the `size` attribute to adjust the size of the input.
Inline Label
username
.com
Colors
1
2
3
4
5
6
7
+
8
9
10
11
+
12
13
14
15
+
16
17
18
19
+
Input Types
NOTE: In some browsers (thanks Safari) failing to provide a default value will cause the date input to render incorrectly. Make sure you supply a default value to prevent this from happening.With label
Add a label to the input using the `<slot/>`
No Border
1
2
3
4
5
+
6
With icon
Clearable
Add a clear button to the input.
Debounce
Sometimes when working with data from a server you want to wait for the user to finish typing
before making a request. The built in `debounce` property and
`on:debounce` event make this easy. Try it out below.
Kitchen Sink
While not recommended you can put pretty every gadget on an input here is what that looks like.
everything
Forms
Inputs also play nice with forms.