# Input

> Source: https://design.nanatec.co.ke/components/input/
> A text input with label, helper text, validation, prefix/suffix and clear support.

A text input with label, helper text, validation, prefix/suffix and clear support.

## Preview

```html
<nana-input label="Email" placeholder="you@example.com" style="min-width:16rem"></nana-input>
```

## Installation

```bash
npm install @nana-tec/ui-components
```

## Import

```js
import "@nana-tec/ui-components/input";
```

## Basic usage

```html
<nana-input label="Email" placeholder="you@example.com" style="min-width:16rem"></nana-input>
```

## Types

```html
<nana-input label="Email" type="email" placeholder="you@example.com" style="max-width:24rem"></nana-input>
<nana-input label="Password" type="password" placeholder="Enter password" style="max-width:24rem"></nana-input>
<nana-input label="Number" type="number" placeholder="42" style="max-width:24rem"></nana-input>
<nana-input label="Search" type="search" placeholder="Search…" style="max-width:24rem"></nana-input>
```

## Sizes

```html
<nana-input label="Extra small" size="xs" placeholder="xs" style="max-width:24rem"></nana-input>
<nana-input label="Small" size="sm" placeholder="sm" style="max-width:24rem"></nana-input>
<nana-input label="Medium" size="md" placeholder="md" style="max-width:24rem"></nana-input>
<nana-input label="Large" size="lg" placeholder="lg" style="max-width:24rem"></nana-input>
```

## States

```html
<nana-input label="Disabled" placeholder="Disabled" disabled></nana-input>
<nana-input label="Readonly" value="Read-only value" readonly></nana-input>
<nana-input label="Loading" placeholder="Checking…" loading></nana-input>
<nana-input label="Invalid" value="bad-value" invalid error-message="Please enter a valid email address"></nana-input>
```

## Prefix & suffix

Slot an icon (or any content) into the `prefix` / `suffix` slots.

```html
<nana-input label="Search" placeholder="Search…" style="max-width:24rem">
  <nana-icon slot="prefix" name="search"></nana-icon>
</nana-input>
<nana-input label="Website" placeholder="example.com" style="max-width:24rem">
  <nana-icon slot="suffix" name="open_in_new"></nana-icon>
</nana-input>
```

## API

## CSS Variables

| Variable | Default | Description |
|---|---|---|
| `--nana-input-bg` | — | Field background colour |
| `--nana-input-color` | — | Input text colour |
| `--nana-input-radius` | — | Field corner radius |

## CSS Parts

| Part | Description |
|---|---|
| `wrapper` | The bordered field container |
| `input` | The native `<input>` element |

## Accessibility

<ul class="a11y-grid not-content">
  <li>Keyboard accessible</li>
  <li>Screen-reader labels</li>
  <li>Focus-visible states</li>
  <li>ARIA roles and states</li>
  <li>WCAG 2.2 AA contrast</li>
</ul>

## Related components

<ul class="related not-content">
  <li><a href="/components/button/">Button</a></li>
  <li><a href="/components/button-group/">Button Group</a></li>
  <li><a href="/components/icon-button/">Icon Button</a></li>
  <li><a href="/components/textarea/">Textarea</a></li>
  <li><a href="/components/range/">Range</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-input--docs