# Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Bootstrap Documentation

## Inputs

### Default

Show code

    <div class="form-group">
        <input type="text" class="form-control" placeholder="Default input">
    </div>

### Emphasized

Show code

    <div class="form-group">
        <input type="text" class="form-control form-control-emphasized" placeholder="Emphasized input">
    </div>

### Muted

Show code

    <div class="form-group">
        <input type="text" class="form-control form-control-muted" placeholder="Muted input">
    </div>

### Flushed

Show code

    <div class="form-group">
        <input type="text" class="form-control form-control-flush" placeholder="Flushed input">
    </div>

## Options

### States

Show code

    <div class="form-group">
        <input type="text" class="form-control is-valid" placeholder="Is valid">
    </div>
    <div class="form-group">
        <input type="text" class="form-control is-invalid" placeholder="Is invalid">
    </div>
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>

### Sizing

Show code

    <div class="form-group">
        <input type="text" class="form-control form-control-xl" placeholder="Extra large input">
    </div>
    <div class="form-group">
        <input type="text" class="form-control form-control-lg" placeholder="Large input">
    </div>
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Normal input">
    </div>
    <div class="form-group">
        <input type="text" class="form-control form-control-sm" placeholder="Small input">
    </div>

## Textarea

### Default

Show code

    <textarea class="form-control" placeholder="You can manually resize this textarea" rows="3"></textarea>

### Non resizable

Show code

    <textarea class="form-control" placeholder="This is a fixed height textarea" rows="3" resize="none"></textarea>

## Custom forms

### Checkboxes

Show code
Check this custom checkbox

    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="customCheck1">
        <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
    </div>

Show code
Check this custom checkbox

    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="customCheck2" data-toggle="indeterminate">
        <label class="custom-control-label" for="customCheck2">Check this custom checkbox</label>
    </div>

Show code
Checkbox button
Active Checkbox Checkbox

    <div class="btn-group btn-group-toggle" data-toggle="buttons">
        <label class="btn btn-primary active">
            <input type="checkbox" name="options" id="checkboxButton1" autocomplete="off" checked> Checkbox button
        </label>
    </div>
    <div class="btn-group btn-group-toggle" data-toggle="buttons">
        <label class="btn btn-primary active">
            <input type="checkbox" name="options" id="checkboxButton2" autocomplete="off" checked> Active
        </label>
        <label class="btn btn-primary">
            <input type="checkbox" name="options" id="checkboxButton3" autocomplete="off"> Checkbox
        </label>
        <label class="btn btn-primary">
            <input type="checkbox" name="options" id="checkboxButton4" autocomplete="off"> Checkbox
        </label>
    </div>

### Radios

Show code
Toggle this custom radio
Or toggle this other custom radio

    <div class="custom-control custom-radio">
        <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
        <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
    </div>
    <div class="custom-control custom-radio">
        <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
        <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
    </div>

Show code
Toggle this custom radio
Or toggle this other custom radio

    <div class="custom-control custom-radio custom-control-inline">
        <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
        <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
        <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
        <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
    </div>

Show code
Radio button
Active Radio Radio

    <div class="btn-group btn-group-toggle" data-toggle="buttons">
        <label class="btn btn-primary active">
            <input type="radio" name="custom-radio-3" id="radioButton1" autocomplete="off"> Radio button
        </label>
    </div>
    <div class="btn-group btn-group-toggle" data-toggle="buttons">
        <label class="btn btn-primary active">
            <input type="radio" name="custom-radio-2"  id="radioButton2" autocomplete="off" checked> Active
        </label>
        <label class="btn btn-primary">
            <input type="radio" name="custom-radio-2"  id="radioButton3" autocomplete="off"> Radio
        </label>
        <label class="btn btn-primary">
            <input type="radio" name="custom-radio-2"  id="radioButton4" autocomplete="off"> Radio
        </label>
    </div>

### Select menu

Show code
Show code