# Special inputs

> This document is the Markdown version of [formisch.dev/vue/guides/special-inputs/](https://formisch.dev/vue/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.

```vue
<template>
  <Field :of="form" :path="['cookies']" v-slot="field">
    <label>
      <input type="checkbox" v-bind="field.props" v-model="field.input" />
      Yes, I want cookies
    </label>
  </Field>
</template>
```

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.

```vue
<template>
  <Field :of="form" :path="['fruits']" v-slot="field">
    <label
      v-for="fruit in [
        { label: 'Bananas', value: 'bananas' },
        { label: 'Apples', value: 'apples' },
        { label: 'Grapes', value: 'grapes' },
      ]"
      :key="fruit.value"
    >
      <input
        type="checkbox"
        :value="fruit.value"
        v-bind="field.props"
        v-model="field.input"
      />
      {{ fruit.label }}
    </label>
  </Field>
</template>
```

## 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.

```vue
<template>
  <Field :of="form" :path="['color']" v-slot="field">
    <label
      v-for="color in [
        { label: 'Red', value: 'red' },
        { label: 'Green', value: 'green' },
        { label: 'Blue', value: 'blue' },
      ]"
      :key="color.value"
    >
      <input
        type="radio"
        :value="color.value"
        v-bind="field.props"
        v-model="field.input"
      />
      {{ color.label }}
    </label>
  </Field>
</template>
```

## Select

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

```vue
<template>
  <Field :of="form" :path="['framework']" v-slot="field">
    <select v-bind="field.props" v-model="field.input">
      <option
        v-for="option in [
          { label: 'Preact', value: 'preact' },
          { label: 'Solid', value: 'solid' },
          { label: 'Qwik', value: 'qwik' },
        ]"
        :key="option.value"
        :value="option.value"
      >
        {{ option.label }}
      </option>
    </select>
  </Field>
</template>
```

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

```vue
<template>
  <Field :of="form" :path="['frameworks']" v-slot="field">
    <select multiple v-bind="field.props" v-model="field.input">
      <option
        v-for="option in [
          { label: 'Preact', value: 'preact' },
          { label: 'Solid', value: 'solid' },
          { label: 'Qwik', value: 'qwik' },
        ]"
        :key="option.value"
        :value="option.value"
      >
        {{ option.label }}
      </option>
    </select>
  </Field>
</template>
```

## 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. Since Vue does not allow `v-model` on file inputs, capture the selection with an `@input` handler and assign it to `field.input`:

```vue
<template>
  <Field :of="form" :path="['avatar']" v-slot="field">
    <input
      v-bind="field.props"
      type="file"
      accept="image/*"
      @input="field.input = ($event.target as HTMLInputElement).files?.[0]"
    />
  </Field>
</template>
```

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

```vue
<template>
  <Field :of="form" :path="['documents']" v-slot="field">
    <input
      v-bind="field.props"
      type="file"
      multiple
      @input="
        field.input = Array.from(($event.target as HTMLInputElement).files ?? [])
      "
    />
  </Field>
</template>
```