# Form Stuff header small text goes here...

Textual form controls—like `<input>`s, `<select>`s, and `<textarea>`s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.
Email address
We'll never share your email with anyone else.
Example select
Example multiple select
Example textarea
<!-- email --> <input type="email" class="form-control" placeholder="Enter email" /> <!-- select --> <select class="form-control">...</select> <!-- multiple select --> <select multiple class="form-control">...</select> <!-- textarea --> <textarea class="form-control" rows="3"></textarea>
Readonly
Readonly Plaintext
Password
<!-- form-control-lg --> <input class="form-control" type="text" placeholder="Readonly input here…" readonly /> <!-- readonly plaintext --> <input type="text" readonly class="form-control-plaintext" value="email@example.com" /> <!-- password --> <input type="password" readonly class="form-control" placeholder="Password" />
<!-- form-control-lg --> <input class="form-control form-control-lg" type="text" /> <select class="form-control form-control-lg">...</select> <!-- default --> <input class="form-control" type="text" /> <select class="form-control">...</select> <!-- form-control-sm --> <input class="form-control form-control-sm" type="text" /> <select class="form-control form-control-sm">...</select>
Valid Input
@
Looks good!
Invalid Input
@
Please choose a unique and valid username.
Tooltip Message
@
Please choose a unique and valid username.
@
Looks good!
<!-- valid --> <div class="row form-group m-b-10"> <label class="col-md-3 col-form-label">Valid Input</label> <div class="col-md-9"> <input type="text" class="form-control is-valid" /> <div class="valid-feedback">Looks good!</div> <div class="valid-tooltip">Looks good!</div> </div> </div> <!-- invalid --> <div class="row form-group m-b-10"> <label class="col-md-3 col-form-label">...</label> <div class="col-md-9"> <input type="text" class="form-control is-invalid" /> <div class="invalid-feedback">...</div> <div class="invalid-tooltip">...</div> </div> </div>

### Checkboxes and Radios

#### CSS Checkbox NEW

CSS Checkboxes & Radios is not supported in older browser.
Default Checkbox
CSS Checkbox Label 1
Disabled State
Success State
Error State
Inline Checkbox
Checkbox Label 1
Checkbox Label 2
Default Radio
Radio option 1
Disabled State
Success State
Error State
Inline Radio
Radio option 1
Radio option 2
Checkbox Switcher
<!-- default --> <div class="checkbox checkbox-css"> <input type="checkbox" id="cssCheckbox1" checked /> <label for="cssCheckbox1">Checkbox</label> </div> <div class="radio radio-css"> <input type="radio" id="cssRadio1" checked /> <label for="cssRadio1">Radio</label> </div> <!-- inline --> <div class="checkbox checkbox-css checkbox-inline"> <input type="checkbox" id="inlineCssCheckbox1" checked /> <label for="inlineCssCheckbox1">Inline Checkbox</label> </div> <div class="radio radio-css radio-inline"> <input type="radio" id="inlineCssRadio1" /> <label for="inlineCssRadio1">Inline Radio</label> </div> <!-- success state --> <div class="checkbox checkbox-css is-valid">...</div> <div class="checkbox checkbox-radio is-valid">...</div> <!-- error state --> <div class="checkbox checkbox-radio is-invalid">...</div> <div class="checkbox checkbox-css is-invalid">...</div> <!-- switcher --> <div class="switcher"> <input type="checkbox" name="switcher_checkbox_1" id="switcher_checkbox_1" checked="" value="1"> <label for="switcher_checkbox_1"></label> </div>
Checkbox
Checkbox Label 1
Disabled Checkbox
Valid Checkbox
Invalid Checkbox
Inline Checkbox
Checkbox Label 1
Checkbox Label 2
Radio Button
Radio option 1
Disabled Radio
Success State
Error State
Inline Radio Button
Radio option 1
Radio option 2
<!-- default --> <div class="form-check"> <input type="checkbox" class="form-check-input" id="defaultCheckbox" /> <label class="form-check-label" for="defaultCheckbox">...<label> </div> <div class="form-check"> <input class="form-check-input" type="radio" id="defaultRadio" checked /> <label class="form-check-label" for="defaultRadio">...</label> </div> <!-- inline --> <div class="form-check form-check-inline"> ... </div> <!-- valid state --> <div class="form-check"> <input class="form-check-input is-valid" /> <label class="form-check-label">...</label> </div> <!-- invalid state --> <div class="form-check"> <input class="form-check-input is-invalid" /> <label class="form-check-label">...</label> </div>

### Datepicker & Timepicker

These datepickers use custom Date adapter that lets you use your own model implementation. In this example we are converting from and to a JS native Date object

    Model: {{ model1 | json }}

    State: {{ c1.status }}

    Model: {{ model2 | json }}

    State: {{ c2.status }}

With Meridian selectors

    Selected time: {{time | json}}

Illustrates custom validation, you have to select time between 12:00 and 13:59

Great choice
Select some time during lunchtime
Oh no, it's way too late
It's a bit too early

    Selected time: {{time2 | json}}

### Input Group

@
$
.00
<div class="input-group"> <span class="input-group-prepend">$</span> <input type="text" class="form-control" /> <span class="input-group-append">.00</span> </div> <div class="input-group"> <input type="text" class="form-control"> <div class="input-group-append"> <button type="button" class="btn btn-yellow" data-toggle="dropdown"> <span class="caret"></span> </button> <button type="button" class="btn btn-yellow dropdown-toggle no-caret"> Action </button> <ul class="dropdown-menu dropdown-menu-right"> ... </ul> </div> </div>
@
@
@
<!-- input-group-lg --> <div class="input-group input-group-lg">...</div> <!-- default --> <div class="input-group">...</div> <!-- input-group-sm --> <div class="input-group input-group-sm">...</div>

### Form Style

Legend
Email address
Password
Check me out
<div class="form-group"> <label>...</label> <input type="text" class="form-control" /> </div>
Legend
Email address
Password
Check me out
<div class="form-group row m-b-15"> <label class="col-md-3 col-form-label">...</label> <div class="col-md-7"> <input type="text" class="form-control" placeholder="" /> </div> </div>
Remember me
<form class="form-inline"> ... </form>