# Special inputs

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 <Link href="/playground/special">playground</Link> 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.

```tsx
<Field of={form} path={['cookies']}>
  {(field) => (
    <label>
      <input {...field.props} type="checkbox" checked={!!field.input} />
      Yes, I want cookies
    </label>
  )}
</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.

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

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

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

## Select

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

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

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

```tsx
<Field of={form} path={['frameworks']}>
  {(field) => (
    {/* Set "multiple" to "true" */}
    <select {...field.props} multiple>
      <For
        each={[
          { label: 'Preact', value: 'preact' },
          { label: 'Solid', value: 'solid' },
          { label: 'Qwik', value: 'qwik' },
        ]}
      >
        {({ label, value }) => (
          <option value={value} selected={field.input?.includes(value)}>
            {label}
          </option>
        )}
      </For>
    </select>
  )}
</Field>
```

## File

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

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

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

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