Provides consistent form control element styling accross browsers.
Overview
Provides styles for different control elements of a form. Some controls only
require the usage of a class and some others require a more complex structure.
Some controls like <input type="submit"> and <input type="button">
are styled using the button atom classes. Make sure to include the
Buttons
style bundle if shipping this alone.
<input type="text" placeholder="Your first name" class="form-control">
<div class="pb--base"></div>
<input type="number" placeholder="123" class="form-control">
<div class="pb--base"></div>
<select class="form-control">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
<div class="pb--base"></div>
<textarea rows="4" placeholder="Write some meaningful..." class="form-control"></textarea>
<div class="pb--base"></div>
<div class="form-control-checkbox">
<input type="checkbox" id="checkbox1" value="" checked>
<label for="checkbox1">Option 1</label>
</div>
<div class="form-control-checkbox">
<input type="checkbox" id="checkbox2" value="">
<label for="checkbox2">Option 2</label>
</div>
<div class="pb--base"></div>
<div class="form-control-radio">
<input type="radio" name="radio" id="radio1" value="" checked>
<label for="radio1">Option 1</label>
</div>
<div class="form-control-radio">
<input type="radio" name="radio" id="radio2" value="">
<label for="radio2">Option 2</label>
</div>
<div class="pb--base"></div>
<input type="reset" class="btn">
<input type="button" value="Click Me" class="btn btn--secondary">
<input type="submit" class="btn btn--primary">
Different types of input can be styled using the .form-control class.
Set the type attribute on all inputs (e.g., email for email address or
number for numerical information) to take advantage of newer input controls
like email verification, number selection, and more. This also covers the
special case of textarea that receives same styling.
<input type="text" placeholder="Your first name" class="form-control">
<div class="pb--base"></div>
<input type="number" placeholder="123" class="form-control">
<div class="pb--base"></div>
<input type="password" placeholder="Password" value="pass123" class="form-control">
<div class="pb--base"></div>
<textarea rows="4" placeholder="Write some meaningful..." class="form-control"></textarea>
Input form controls are styled for disabled when using the attribute disabled.
<input type="text" value="Disabled text field" disabled class="form-control">
<div class="pb--base"></div>
<textarea rows="4" disabled class="form-control">Disabled...</textarea>
Input form controls are styled for readonly when using the attribute readonly.
<input type="text" value="Readonly text field" readonly class="form-control">
<div class="pb--base"></div>
<textarea rows="4" placeholder="Readonly state" readonly class="form-control"></textarea>
Adjust size with .form-control--sm and .form-control--lg classes.
<input type="text" placeholder="Small size" class="form-control form-control--sm">
<div class="pb--base"></div>
<input type="text" placeholder="Default size" class="form-control">
<div class="pb--base"></div>
<input type="text" placeholder="Large size" class="form-control form-control--lg">
Select
Select elements are also customized using the .form-control class.
option 1
option 2
option 3
option 1
option 2
option 3
option 4
option 5
<select class="form-control">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
<div class="pb--base"></div>
<select multiple="" class="form-control">
<option>option 1</option>
<option selected>option 2</option>
<option selected>option 3</option>
<option>option 4</option>
<option>option 5</option>
</select>
Disabled Select
Select form controls will also be styled when disabled attribute is present.
option 1
option 2
<select class="form-control" disabled>
<option>option 1</option>
<option>option 2</option>
</select>
Select Size
Adjust the size using the .form-control--sm and .form-control--lg classes.
Small option 1
Default option 1
Large option 1
<select class="form-control form-control--sm">
<option>Small option 1</option>
</select>
<div class="pb--base"></div>
<select class="form-control">
<option>Default option 1</option>
</select>
<div class="pb--base"></div>
<select class="form-control form-control--lg">
<option>Large option 1</option>
</select>
Checkbox
Customize checkbox input element using the .form-control-checkbox class over
a parent element containing the checkbox input.
<div class="form-control-checkbox">
<input type="checkbox" name="" id="checkbox-example1" value="" checked>
<label for="checkbox-example1">Option 1</label>
</div>
<div class="form-control-checkbox">
<input type="checkbox" name="" id="checkbox-example2" value="">
<label for="checkbox-example2">Option 2</label>
</div>
Disabled Checkbox
Checkboxes are styled for disabled when adding the attribute disabled.
<div class="form-control-checkbox">
<input type="checkbox" name="" id="checkbox-disabled1" value="" checked>
<label for="checkbox-disabled1">Option 1</label>
</div>
<div class="form-control-checkbox">
<input type="checkbox" name="" id="checkbox-disabled2" value="" checked disabled>
<label for="checkbox-disabled2">Option 2 checked disabled</label>
</div>
<div class="form-control-checkbox">
<input type="checkbox" name="" id="checkbox-disabled3" value="" disabled>
<label for="checkbox-disabled3">Option 3 disabled</label>
</div>
Checkbox Size
Control the size of checkboxes using the form-control-checkbox--lg class.
<div class="form-control-checkbox">
<input type="checkbox" name="" id="checkbox-large1" value="" checked>
<label for="checkbox-large1">Default size</label>
</div>
<div class="form-control-checkbox form-control-checkbox--lg">
<input type="checkbox" name="" id="checkbox-large2" value="">
<label for="checkbox-large2">Large size</label>
</div>
Radio
Customize radio input element using the class .form-control-radio over
a parent element containing the radio input.
<div class="form-control-radio">
<input type="radio" name="radio-example" id="radio-example1" value="" checked>
<label for="radio-example1">Option 1</label>
</div>
<div class="form-control-radio">
<input type="radio" name="radio-example" id="radio-example2" value="">
<label for="radio-example2">Option 2</label>
</div>
<div class="form-control-radio">
<input type="radio" name="radio-example" id="radio-example3" value="">
<label for="radio-example3">Option 3</label>
</div>
Radio Disabled
Radios are styled for disabled when adding the attribute disabled.
<div class="form-control-radio">
<input type="radio" name="radio-disabled" id="radio-disabled1" value="">
<label for="radio-disabled1">Option 1</label>
</div>
<div class="form-control-radio">
<input type="radio" name="radio-disabled" id="radio-disabled2" value="" checked disabled>
<label for="radio-disabled2">Option 2 checked disabled</label>
</div>
<div class="form-control-radio">
<input type="radio" name="radio-disabled" id="radio-disabled3" value="" disabled>
<label for="radio-disabled3">Option 3 disabled</label>
</div>
Radio Size
Control the size of radios using the form-control-radio--lg class.
<div class="form-control-radio">
<input type="radio" name="radio-size" id="radio-size1" value="" checked>
<label for="radio-size1">Default size</label>
</div>
<div class="form-control-radio form-control-radio--lg">
<input type="radio" name="radio-size" id="radio-size2" value="">
<label for="radio-size2">Large size</label>
</div>
Download
Get a bundle with all form control styles.
Download
<p>Get a bundle with all form control styles.</p>
<a href="/styles/atoms/formControl.css" download="cs-form-control.css" target="_blank" class="btn btn--primary">Download</a>