# 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/).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bootstrapbay.gitbook.io/grace-ui-kit/components/inputs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.