# Input · MIAN

Single-line text entry. Styles every native input type: text, email, password, search, number, date, time, color.

- Id: `input` · Category: Forms · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/input
- Use for: text input, email field, search field, date input, form input.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `mn-input`: Base input.
- `mn-input-sm · mn-input-lg`: Sizes.
- `aria-invalid="true"`: Error state.

## Accessibility

- Use the right type and autocomplete values so mobile keyboards and password managers help.
- Placeholder is not a label.

## Examples

### Types

```html
<div class="mn-stack" style="max-width:22rem">
  <input class="mn-input" type="text" placeholder="Text" aria-label="Text">
  <input class="mn-input" type="password" value="hunter2" aria-label="Password">
  <input class="mn-input" type="date" aria-label="Date">
  <input class="mn-input" type="search" placeholder="Search…" aria-label="Search">
</div>
```

### Sizes

```html
<div class="mn-stack" style="max-width:22rem">
  <input class="mn-input mn-input-sm" placeholder="Small" aria-label="Small">
  <input class="mn-input" placeholder="Default" aria-label="Default">
  <input class="mn-input mn-input-lg" placeholder="Large" aria-label="Large">
</div>
```

### States

```html
<div class="mn-stack" style="max-width:22rem">
  <input class="mn-input" value="Disabled" disabled aria-label="Disabled">
  <input class="mn-input" value="Read only" readonly aria-label="Read only">
  <input class="mn-input" value="Invalid" aria-invalid="true" aria-label="Invalid">
</div>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/input/source