# Special inputs

> This document is the Markdown version of [formisch.dev/svelte/guides/special-inputs/](https://formisch.dev/svelte/guides/special-inputs/). For the complete documentation index, see [llms.txt](https://formisch.dev/llms.txt).

As listed in our features, the library supports all native HTML form fields. This includes the HTML `<select />` element as well as special cases of the `<input />` element.

> In our [playground](/playground/special/) you can take a look at such fields and test them out.

## Checkbox

A simple checkbox represents a boolean and is `true` when checked or `false` otherwise.

```svelte
<Field of={form} path={['cookies']}>
  {#snippet children(field)}
    <label>
      <input {...field.props} type="checkbox" checked={field.input} />
      Yes, I want cookies
    </label>
  {/snippet}
</Field>
```

However, you can also use multiple checkboxes to represent an array of strings. For this you simply have to add the `value` attribute to the HTML `<input />` element.

```svelte
{#each [{ label: 'Bananas', value: 'bananas' }, { label: 'Apples', value: 'apples' }, { label: 'Grapes', value: 'grapes' }] as { label, value }}
  <Field of={form} path={['fruits']}>
    {#snippet children(field)}
      <label>
        <input
          {...field.props}
          type="checkbox"
          {value}
          checked={field.input?.includes(value)}
        />
        {label}
      </label>
    {/snippet}
  </Field>
{/each}
```

## Radio

A group of radio buttons, while similar to an array of checkboxes, will only allow you to select one of the options based on which button is checked.

```svelte
<Field of={form} path={['color']}>
  {#snippet children(field)}
    {#each [{ label: 'Red', value: 'red' }, { label: 'Green', value: 'green' }, { label: 'Blue', value: 'blue' }] as { label, value }}
      <label>
        <input
          {...field.props}
          type="radio"
          {value}
          checked={field.input === value}
        />
        {label}
      </label>
    {/each}
  {/snippet}
</Field>
```

## Select

An HTML `<select />` element allows you to select a string from a predefined list of options.

```svelte
<Field of={form} path={['framework']}>
  {#snippet children(field)}
    <select {...field.props}>
      {#each [{ label: 'Preact', value: 'preact' }, { label: 'Solid', value: 'solid' }, { label: 'Qwik', value: 'qwik' }] as { label, value }}
        <option {value} selected={field.input === value}>
          {label}
        </option>
      {/each}
    </select>
  {/snippet}
</Field>
```

However, if you set the `multiple` attribute, multiple options can be selected making the field represent an array of strings.

```svelte
<Field of={form} path={['frameworks']}>
  {#snippet children(field)}
    <select {...field.props} multiple>
      {#each [{ label: 'Preact', value: 'preact' }, { label: 'Solid', value: 'solid' }, { label: 'Qwik', value: 'qwik' }] as { label, value }}
        <option {value} selected={field.input?.includes(value)}>
          {label}
        </option>
      {/each}
    </select>
  {/snippet}
</Field>
```

## File

An HTML `<input type="file" />` works similarly to an HTML `<select />` element. Without the `multiple` attribute, it represents a single file; with `multiple`, it represents a list of files.

```svelte
<Field of={form} path={['avatar']}>
  {#snippet children(field)}
    <input {...field.props} type="file" accept="image/*" />
  {/snippet}
</Field>
```

With the `multiple` attribute, users can select multiple files:

```svelte
<Field of={form} path={['documents']}>
  {#snippet children(field)}
    <input {...field.props} type="file" multiple />
  {/snippet}
</Field>
```