Forms
Example :: Input
<script>
import { Input } from '@colorfuldots/svelteit'
</script>
<Input placeholder="First Name" />
<Input placeholder="Last Name" />
Example :: Input With Labels
<script>
import { Input } from '@colorfuldots/svelteit'
</script>
<Input placeholder="First Name" label="First Name" />
<Input placeholder="Last Name" label="Last Name" />
Example :: Input File
<script>
import { Input } from '@colorfuldots/svelteit'
</script>
<Input type="file" label="Upload Resume" />
Example :: Input With Range
<script>
import { Input } from '@colorfuldots/svelteit'
let a = 0
</script>
<Input type="number" bind:value={a} min={0} max={10} />
Example :: Input With Bindings
dog
<script>
import { Input } from '@colorfuldots/svelteit'
let pet = "dog"
</script>
<Input bind:value={pet} />
<p>{pet}</p>
Example :: Select
<script>
import { Select } from '@colorfuldots/svelteit'
</script>
<Select>
<option value="" selected disabled hidden>Select Car</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</Select>
Example :: Select With Data
<script>
import { Select } from '@colorfuldots/svelteit'
let numbers = ['one', 'two', 'three']
</script>
<Select>
<option value="" selected disabled hidden>Select Car</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</Select>
Example :: Multiple Select & Data
<script>
import { Select } from '@colorfuldots/svelteit'
let things = ['one','two','three','four','five','six','seven','eight','nine','ten']
</script>
<Select bind:value={things} multiple>
{#each things as thing}
<option value={thing}>{thing}</option>
{/each}
</Select>
Example :: Textarea
<script>
import { Textarea } from 'svelteit'
</script>
<Textarea placeholder="First Name" label="First Name" />
Example :: Radio Group
<script>
import { Input } from 'svelteit'
let selected = null
let words = [
{id: 1, word: 'We'},
{id: 2, word: 'Love'},
{id: 3, word: 'Svelte'}
]
</script>
{#each words as w}
<div>
<input type="radio" bind:group={selected} value={w.id} id={w.id} />
<label for={w.id}>{w.word}</label>
</div>
{/each}
<p>{#if selected} Selected: {selected} {/if}</p>
Example :: Checkboxes
<script>
import { Input } from 'svelteit'
let choices = []
let children = ['Sally', 'Mary', 'Eva', 'Zoe', 'Jane']
</script>
{#each children as child}
<label>
<input type="checkbox" bind:group={choices} value={child} />
{child}
</label>
{/each}
{#if choices.length !== 0}
<p>Choices: {choices}</p>
{/if}
Example :: Switch (custom colors)
<script>
import { Switch } from 'svelteit'
let featureToggle = false
</script>
<Switch
bind:checked={featureToggle}
unCheckedColor={'lightgray'}
checkedColor={'green'} />
Example :: Disabled Switch
<script>
import { Switch } from 'svelteit'
let disabledToggle = true
</script>
<Switch bind:checked={disabledToggle} disabled />
API
Coming soon!
Forms
An HTML form element is any element that may be used inside of a 'Form' tag. These elements, along with the unique and standard attributes, give a form its structure as well as let it know what to do with the data input by users.