> For the complete documentation index, see [llms.txt](https://bootstrapbay.gitbook.io/grace-ui-kit/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bootstrapbay.gitbook.io/grace-ui-kit/components/inputs.md).

# Forms

### Overview

The form controls consist of  `<input>`s, `<select>`s and `<textarea>`s. They all need the `.form-control` class to get their styling. You can see examples below:

![](/files/-LG5pqYh3LbjiYcd6xjJ)

```markup
<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>
```

### Size

You can vary the height from large to small.

![](/files/-LG5qnmv4p0vincCC6bc)

```markup
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
```

### Checkboxes and Radio

We have restyled the checkbox and radio buttons. You will need to use the custom classes `.poly-check` and `.poly-radio` to use them instead of the default controls.

![](/files/-LG5rUf2wCXI5sOkgrs8)

```markup
<div class="row">
    <div class="col-5">
        <input type="checkbox" id="checkbox-1" checked>

        <label for="checkbox-1" class="checkbox">
            <span class="poly-checkbox"></span> 
            <span class="input-label">Active</span>  
        </label>
    </div>
    <div class="col-6">
        <input type="checkbox"  id="checkbox-2">
        
        <label for="checkbox-2" class="checkbox">  
            <span class="poly-checkbox"></span> 
            <span class="input-label">Normal</span> 
        </label>
    </div>
</div>
<div class="row">
    <div class="col-5">
        <input type="radio" id="radio-1" checked="checked" name="radio">
        
        <label for="radio-1" class="radio">
        	<span class="poly-radio"></span> <span class="input-label">Active</span>
		</label>
    </div>
    <div class="col-6">
        <input type="radio"  id="radio-2" name="radio"> 
        
        <label for="radio-2" class="radio" >   
            <span class="poly-radio"></span> <span class="input-label">Normal</span> 
        </label>
    </div>
</div>
```

### Disabled Inputs

You can add the  `disabled` boolean attribute on an input to prevent user interactions.

![](/files/-LG5oPGwR9D6T5CcLW_8)

```markup
<label>Disabled Input</label>
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
```

If you want to see more examples and properties please check the official [Bootstrap Documentation](http://getbootstrap.com/docs/4.0/components/forms/).