---
layout: post
title:  "Forms"
categories: components
permalink: /forms/
---

Form elements are designed to fall out for free, without having to add any additional classes.

### Basic Input
<div class="pattern">
  <input type="email" placeholder="Email address">
</div>

``` html
<input type="email" placeholder="Email address">
```

### Select
<div class="pattern">
  <select>
    <option selected disabled>Select a cluster</option>
    <option>mt1 (us-east-1)</option>
    <option>eu (eu-west-1)</option>
    <option>ap1 (ap-southeast-1)</option>
  </select>
</div>

```html
<div class="pattern">
  <select>
    <option selected disabled>Select a cluster</option>
    <option>mt1 (us-east-1)</option>
    <option>eu (eu-west-1)</option>
    <option>ap1 (ap-southeast-1)</option>
  </select>
</div>
```


However extra classes are provided to bind for certain events, such as form errors.

<div class="pattern">
  <input type="email" placeholder="Email address" class="error">
</div>

``` html
<input type="email" placeholder="Email address" class="error">
```
---
layout: post
title:  "Forms"
categories: components
permalink: /forms/
---

Form elements are designed to fall out for free, without having to add any additional classes.

### Basic Input
<div class="pattern">
  <input type="email" placeholder="Email address">
</div>

``` html
<input type="email" placeholder="Email address">
```

### Select
<div class="pattern">
  <select>
    <option selected disabled>Select a cluster</option>
    <option>mt1 (us-east-1)</option>
    <option>eu (eu-west-1)</option>
    <option>ap1 (ap-southeast-1)</option>
  </select>
</div>

```html
<select>
  <option selected disabled>Select a cluster</option>
  <option>mt1 (us-east-1)</option>
  <option>eu (eu-west-1)</option>
  <option>ap1 (ap-southeast-1)</option>
</select>
```


However extra classes are provided to bind for certain events, such as form errors.

<div class="pattern">
  <input type="email" placeholder="Email address" class="error">
</div>

``` html
<input type="email" placeholder="Email address" class="error">
```
Remove pattern from form docs
Remove pattern from form docs
