<commit_before>---
title: Form
layout: page.jade
sidebar: true
collection: css
priority: 1
path: form
---

# Form
<p class="lead">Basic form components</p>

## Summary
1. [Controls](#controls)
2. [Molecules](#molecules)
3. [Disabled Controls](#disabled-controls)
4. [Validation Controls](#validation-controls)

## Controls
Form controls are by default styled with `width: 100%`, and use a smooth border transition on `focus` event.

Checkout the [JavaScript section of the form](js/form.html) in order to see how to handle `.active` molecule.

### Label
Tag `<label>` is not styled by default. If you want to use as the context of `label` + `control`, use the `.label` class.

<div class="example example-code">
  <label class="label">Example</label>
</div>

```html
<label class="label"></label>
```

### Input
Tag `<input>` is not styled by default. You must use `.input` in order to style it:

<div class="example example-code">
  <input type="text" class="input" placeholder="Input" />
</div>

```html
<input type="text" class="input" />
```

### Textarea
Tag `<textarea>` is not styled by default. You must use `.textarea` in order to style it:

<div class="example example-code">
  <textarea class="textarea" placeholder="Textarea"></textarea>
</div>

```html
<textarea class="textarea"></textarea>
```

### Select

Tag `<select>` is not styled by default. You must use the `.select` in order to style it.

<div class="example example-code">
  <select class="select">
    <option>Select your option</option>
    <option value="option-1">Option 1</option>
    <option value="option-2">Option 2</option>
    <option value="option-3">Option 3</option>
  </select>
</div>

```html
<select class="select">
  <option></option>
</select>
```

### Helper

`.helper` is used to display additional info as a small description or validation feedback.

<div class="example example-code">
  <span class="helper">Helper text</span>
</div>

```html
<span class="helper"></span>
```

## Molecules
Molecules by default are composition of atoms, providing unique styles to them as well.


### Field
The `.field` molecule provides a wrapper to `label` + `control` + `helper` (additional).

_**Obs:** When using `.helper`, don't forget to add `aria-describedby` indicate which field the description refers._

<div class="example example-code">
  <div class="field">
    <input type="text" class="input" name="name" id="name" />
    <label for="name" class="label">Input Label</label>
    <span class="helper" aria-describedby="name">Input Helper</span>
  </div>
</div>

```html
<div class="field">
  <input type="text" class="input"/>
  <label class="label"></label>
  <span class="helper" aria-describedby=""></span>
</div>
```

<div class="example example-code">
  <div class="field">
    <select class="select" name="select" id="select">
      <option> </option>
      <option>option</option>
    </select>
    <label for="select" class="label">Select Label</label>
    <span class="helper" aria-describedby="name">Input Helper</span>
  </div>
</div>

```html
<div class="field">
  <select class="select">
    <option></option>
  </select>
  <label class="label"></label>
  <span class="helper" aria-describedby=""></span>
</div>
```

Please take note when using `label` + `control` on `radio|checkbox` the label will be positioned on the right side of it.

<div class="example example-code">
  <div class="field">
    <input type="radio" name="garden-radio" id="garden-radio"/>
    <label for="garden-radio" class="label">Radio</label>
  </div>

  <div class="field">
    <input type="checkbox" name="garden-checkbox" id="garden-checkbox"/>
    <label for="garden-checkbox" class="label">Checkbox</label>
  </div>
</div>

```html
<div class="field">
  <input type="radio"/>
  <label class="label">Radio</label>
</div>

<div class="field">
  <input type="checkbox"/>
  <label class="label">Checkbox</label><commit_msg>fix(select): added field-select in docs<commit_after>---
title: Form
layout: page.jade
sidebar: true
collection: css
priority: 1
path: form
---

# Form
<p class="lead">Basic form components</p>

## Summary
1. [Controls](#controls)
2. [Molecules](#molecules)
3. [Disabled Controls](#disabled-controls)
4. [Validation Controls](#validation-controls)

## Controls
Form controls are by default styled with `width: 100%`, and use a smooth border transition on `focus` event.

Checkout the [JavaScript section of the form](js/form.html) in order to see how to handle `.active` molecule.

### Label
Tag `<label>` is not styled by default. If you want to use as the context of `label` + `control`, use the `.label` class.

<div class="example example-code">
  <label class="label">Example</label>
</div>

```html
<label class="label"></label>
```

### Input
Tag `<input>` is not styled by default. You must use `.input` in order to style it:

<div class="example example-code">
  <input type="text" class="input" placeholder="Input" />
</div>

```html
<input type="text" class="input" />
```

### Textarea
Tag `<textarea>` is not styled by default. You must use `.textarea` in order to style it:

<div class="example example-code">
  <textarea class="textarea" placeholder="Textarea"></textarea>
</div>

```html
<textarea class="textarea"></textarea>
```

### Select

Tag `<select>` is not styled by default. You must use the `.select` in order to style it.

<div class="example example-code">
  <div class="field field-select">
    <select class="select">
      <option></option>
      <option value="option-1">Option 1</option>
      <option value="option-2">Option 2</option>
      <option value="option-3">Option 3</option>
    </select>
    <label class="label">Select your option</label>
  </div>
</div>

```html
<div class="field field-select">
  <select class="select">
    <option></option>
  </select>
</div>
```

### Helper

`.helper` is used to display additional info as a small description or validation feedback.

<div class="example example-code">
  <span class="helper">Helper text</span>
</div>

```html
<span class="helper"></span>
```

## Molecules
Molecules by default are composition of atoms, providing unique styles to them as well.


### Field
The `.field` molecule provides a wrapper to `label` + `control` + `helper` (additional).

_**Obs:** When using `.helper`, don't forget to add `aria-describedby` indicate which field the description refers._

<div class="example example-code">
  <div class="field">
    <input type="text" class="input" name="name" id="name" />
    <label for="name" class="label">Input Label</label>
    <span class="helper" aria-describedby="name">Input Helper</span>
  </div>
</div>

```html
<div class="field">
  <input type="text" class="input"/>
  <label class="label"></label>
  <span class="helper" aria-describedby=""></span>
</div>
```

<div class="example example-code">
  <div class="field field-select">
    <select class="select" name="select" id="select">
      <option> </option>
      <option>option</option>
    </select>
    <label for="select" class="label">Select Label</label>
    <span class="helper" aria-describedby="name">Input Helper</span>
  </div>
</div>

```html
<div class="field field-select">
  <select class="select">
    <option></option>
  </select>
  <label class="label"></label>
  <span class="helper" aria-describedby=""></span>
</div>
```

Please take note when using `label` + `control` on `radio|checkbox` the label will be positioned on the right side of it.

<div class="example example-code">
  <div class="field">
    <input type="radio" name="garden-radio" id="garden-radio"/>
    <label for="garden-radio" class="label">Radio</label>
  </div>

  <div class="field">
    <input type="checkbox" name="garden-checkbox" id="garden-checkbox"/>
    <label for="garden-checkbox" class="label">Checkbox</label>
  </div>
</div>

```html
<div class="field">
  <input type="radio"/>
  <label class="label">Radio</label>
</div>

<div class="field">
  <input type="checkbox"/>
  <label class="label">Checkbox</label>
{'fraction_non_alphanumeric': 0.18095476130967258, 'fraction_numerical': 0.0034991252186953262, 'mean_word_length': 4.63194933145672, 'pattern_counts': {'":': 0, '<': 219, '<?xml version=': 0, '>': 219, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1253492', 'n_tokens_mistral': 2600, 'n_tokens_neox': 2478, 'n_words': 789}