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

## Inline Validation Alerts

These inline alerts can be used to display form validation notices to users. Note that these require the input to be wrapped in a `form__field` container. The alert can be animated in by toggling the `has-validation-alert` class on the `form__field` wrapper.

<div class="pattern">
  <div class="form__field has-validation-alert">
    <input type="email" placeholder="Email address">
    <span class="input-validation-alert input-validation-alert--error">Sorry, we were unable to subscribe you</span>
  </div>
</div>

``` html
<div class="form__field has-validation-alert">
  <input type="email" placeholder="Email address">
  <span class="input-validation-alert input-validation-alert--error">Sorry, we were unable to subscribe you</span>
</div>
```

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