---
layout: post
title:  "Forms"
subtitle: "Form inputs can be used without having to add any additional classes. With the exception of checkboxes and radios, they will always default to 100% width of their parent."
categories: components
permalink: /components/forms/
---

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

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

There are also modifier classes for inputs that sit on a darker background:

<div class="pattern pattern--dark">
  <input type="email" class="input--light" placeholder="Email address">
</div>

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

As well as classes to indicate status:

<div class="pattern">
  <input type="email" class="valid" placeholder="Email address">
  <input type="password" class="error" style="margin-top:20px" placeholder="Password">
</div>

``` html
<input type="email" class="valid" placeholder="Email address">
<input type="password" class="error" placeholder="Password">
```

## 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>
```

## Checkbox
<div class="pattern">
  <input type="checkbox" value="1" checked="checked" name="hello" id="hello">
</div>

```html
<input type="checkbox" value="1" checked="checked" name="hello" id="hello">
```