Input

Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.

<script>
    import { Icon, Input } from 'svelte-spectre'

    let value
</script>

<Input
    bind:value
    rows={1}
    size={'md'}
    width={0}
    options={options}
    placeholder="placeholder"
    validity={null}
    expand={false}>
        <Icon slot="iconLeft" icon="emoji" />
        Label
        <Icon slot="iconRight" icon="emoji" />
        <span slot="hint">hint</span>
    </Input>

Input Group

If you want to attach text and button along with an input, add the input-group class to the input container. And add the input-group-addon class to the text element and input-group-btn to the button element.

<script>
    import { Button, Checkbox, Input, InputGroup, Select, Switch } from 'svelte-spectre'

    let value,
        selected,
        questions = [
            { value: 1, label: `Where did you go to school?` },
            { value: 2, label: `What is your mother's name?` },
            {
                value: 3,
                label: `What is another personal fact that an attacker could easily find with Google?`,
            },
        ]
</script>

<InputGroup let:button>
    <Switch />
    <Input expand />
    <Button slot="button" variant="primary" let:button input class={button}
        >{button}</Button
    >
</InputGroup>

<InputGroup let:button>
    <Checkbox />
    <Input expand />
    <Button slot="button" variant="primary" let:button input class={button}
        >{button}</Button
    >
</InputGroup>

<InputGroup let:button>
    <Checkbox />
    <Input expand />
    <Select options={questions} bind:value={selected} />
</InputGroup>