# Input types

Source: https://iriscss.com/documentation/form/input-types/

Search, date and time, color, file and range inputs, each with a look that fits the rest of the form.

## Search

A search input is a pill with a magnifier at the start.

```html
<input type="search" name="q" placeholder="Search the docs" aria-label="Search the docs">
```

## Date and time

In Chrome and Edge, the picker button of `date`, `datetime-local`, `month` and `week` gets a calendar icon, and `time` a clock. Firefox and Safari keep their own.

```html
<div class="grid">
  <label>Date <input type="date" name="date"></label>
  <label>Time <input type="time" name="time"></label>
  <label>Month <input type="month" name="month"></label>
  <label>Week <input type="week" name="week"></label>
</div>
<label>Date and time <input type="datetime-local" name="when"></label>
```

## Color

```html
<label>Brand color <input type="color" name="brand" value="#e12afb"></label>
```

## File

The picker is a secondary [button](https://iriscss.com/documentation/elements/button/index.html.md) followed by the file name.

```html
<label>Avatar <input type="file" name="avatar" accept="image/*"></label>
```

## Range

The thumb turns primary while you use it, with an accent dot while you drag it. A [color class](https://iriscss.com/documentation/modifiers/colors/index.html.md) changes the primary color.

```html
<label>Volume <input type="range" name="volume" value="40"></label>
```

## Variables

| Variable | Default |
| --- | --- |
| `--i-input-search-border-radius` | `var(--i-border-radius-pill)` |
| `--i-input-date-icon-size` | `1rem` |
| `--i-range-color-track` | `light-dark(#8790a3, #5f6880)` |
| `--i-range-active-color-track` | `light-dark(#6f788c, #7b849a)` |
| `--i-range-color-thumb` | `var(--i-color-secondary)` |
| `--i-range-thumb-color-border` | `var(--i-color-background)` |