# Controls

Source: https://iriscss.com/documentation/form/controls/

Inputs, selects and textareas are full width, with a label above and room for helper text below.

Write a plain form. Each control fills the width, and a control inside its `label` sits right under the label text. Buttons, submit buttons included, keep the width of their text.

```html
<form>
  <label>Name <input type="text" name="name" placeholder="Ada Lovelace" autocomplete="name"></label>
  <label>Email <input type="email" name="email" placeholder="ada@example.com" autocomplete="email"></label>
  <button type="submit">Send</button>
</form>
```

## Select

A select gets a chevron. Where the browser supports a customizable select, the option list follows the theme too.

```html
<label>
  Plan
  <select name="plan" required>
    <option value="" selected disabled>Choose a plan</option>
    <option>Free</option>
    <option>Pro</option>
    <option>Team</option>
  </select>
</label>
<label>
  Topics
  <select name="topics" multiple size="3">
    <option selected>Forms</option>
    <option>Layout</option>
    <option>Components</option>
  </select>
</label>
```

## Textarea

A textarea grows with its text, from 4 to 16 lines, where the browser supports `field-sizing`. A `rows` attribute keeps a fixed height.

```html
<label>Message <textarea name="message" placeholder="Type a few lines"></textarea></label>
```

## Helper text

A `small` right after a control is its helper text. Link it with `aria-describedby`.

```html
<label for="username">Username</label>
<input type="text" id="username" aria-describedby="username-help">
<small id="username-help">Letters and numbers only.</small>
```

## Fieldset

A `fieldset` groups related controls under a `legend`. `disabled` on the fieldset turns off and fades every control inside.

```html
<fieldset disabled>
  <legend>Shipping</legend>
  <label>Street <input type="text" name="street"></label>
  <button type="submit">Save</button>
</fieldset>
```

## Side by side

Put controls in a [`.grid`](https://iriscss.com/documentation/layout/container-and-grid/index.html.md#grid) to place them in columns that stack on narrow screens.

```html
<div class="grid">
  <label>First name <input type="text" name="first"></label>
  <label>Last name <input type="text" name="last"></label>
</div>
```

## Output

`output` shows a computed value in bold with even digit widths, so it does not shift as it changes.

```html
<form oninput="total.value = Number(price.value) * Number(count.value)">
  <div class="grid">
    <label>Price <input type="number" name="price" value="12"></label>
    <label>Count <input type="number" name="count" value="3"></label>
  </div>
  <p>Total: <output name="total">36</output></p>
</form>
```

## Disabled and read only

```html
<input type="text" value="Disabled" disabled aria-label="Disabled">
<input type="text" value="Read only" readonly aria-label="Read only">
```

## Sizes

```html
<input type="text" class="small" placeholder="Small" aria-label="Small">
<input type="text" placeholder="Default" aria-label="Default">
<input type="text" class="medium" placeholder="Medium" aria-label="Medium">
<select class="large" aria-label="Large"><option>Large</option></select>
```

## Styles

`.rounded` gives pill corners, `.square` removes them and `.outlined` makes the background transparent.

```html
<input type="text" class="rounded" placeholder="Rounded" aria-label="Rounded">
<input type="text" class="square" placeholder="Square" aria-label="Square">
<input type="text" class="outlined" placeholder="Outlined" aria-label="Outlined">
```

## Variables

Buttons and inputs share the `--i-control-` variables.

| Variable | Default | Note |
| --- | --- | --- |
| `--i-control-padding-block` | `0.4rem` | Controls: buttons and inputs |
| `--i-control-padding-inline` | `0.875rem` |  |
| `--i-control-disabled-opacity` | `0.5` |  |
| `--i-label-font-weight` | `var(--i-font-weight)` |  |
| `--i-input-outline-width` | `var(--i-focus-ring-width)` | Inputs: text, select and textarea |
| `--i-textarea-min-height` | `4lh` | Growth range of a textarea without rows, where field-sizing is supported |
| `--i-textarea-max-height` | `16lh` |  |
| `--i-input-color-text` | `light-dark(#23262c, #e0e3e7)` |  |
| `--i-input-color-background` | `light-dark(#fbfcfd, #1c212c)` |  |
| `--i-input-color-border` | `light-dark(#878fa2, #636c84)` | 3:1 against the page, as WCAG asks for control boundaries |
| `--i-input-color-placeholder` | `light-dark(var(--i-color-subtle), #8891a4)` |  |
| `--i-input-selected-color-background` | `light-dark(#dfe3eb, #2a3140)` |  |
| `--i-input-active-color-background` | `light-dark(var(--i-color-white), #1a1f28)` |  |
| `--i-input-active-color-border` | `color-mix(in oklab, var(--i-color-primary), var(--i-color-ink) 10%)` |  |
| `--i-input-focus-color-outline` | `color-mix(in oklab, var(--i-color-primary), var(--i-color-ink) 40%)` |  |
| `--i-input-button-focus-color-outline` | `var(--i-input-focus-color-outline)` |  |
| `--i-input-invalid-color-border` | `var(--i-color-danger)` | Derived from the danger and success colors, like the state icons |
| `--i-input-invalid-active-color-border` | `color-mix(in oklab, var(--i-color-danger), var(--i-color-ink) 15%)` |  |
| `--i-input-invalid-focus-color-outline` | `var(--i-input-invalid-active-color-border)` |  |
| `--i-input-valid-color-border` | `color-mix(in oklab, var(--i-color-success), var(--i-color-ink) 15%)` |  |
| `--i-input-valid-active-color-border` | `color-mix(in oklab, var(--i-color-success), var(--i-color-ink) 30%)` |  |
| `--i-input-valid-focus-color-outline` | `var(--i-input-valid-active-color-border)` |  |