## Material Bootstrap Forms

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

## Overview

Here’s a quick example to demonstrate Smart.Core’s form styles. Keep reading for documentation on required classes, form layout, and more.

Email address We'll never share your email with anyone else.
Password
Check me out
Submit

## Form components

Textual form components—like <input>s, <select>s, and <textarea>s—are styled with the .form-component class. Included are styles for general appearance, focus state, sizing, and more.

Email address
Example select
Example multiple select
Example textarea

## Sizing

Set heights using classes like .form-component-lg and .form-component-sm.

## Readonly plain text

If you want to have <input readonly> elements in your form styled as plain text, use the .form-component-plaintext class to remove the default form field styling and preserve the correct margin and padding.

Email
Password
Email
Password

## Range Inputs

Set horizontally scrollable range inputs using .form-component-range.

Example Range input

## Checkboxes and radios

Default checkboxes and radios are improved upon with the help of .form-check, a single class for both input types that improves the layout and behavior of their HTML elements. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

Disabled checkboxes and radios are supported. The disabled attribute will apply a lighter color to help indicate the input’s state.

Checkboxes and radios use are built to support HTML-based form validation and provide concise, accessible labels. As such, our <input≶s and <label≶s are sibling elements as opposed to an <input≶ within a <label≶. This is slightly more verbose as you must specify id and for attributes to relate the <input≶ and <label≶.

## Default (stacked)

Default checkbox
Disabled checkbox

## Inline

Group checkboxes or radios on the same horizontal row by adding .form-check-inline to any .form-check.

1
2
3 (disabled)

## Horizontal form

Create horizontal forms with the grid by adding the .row class to form groups and using the .col-*-* classes to specify the width of your labels and components. Be sure to add .col-form-label to your <label>s as well so they’re vertically centered with their associated form components..

1
2
3 (disabled)

## Layout

Since Material Bootstrap applies display: block and width: 100% to almost all our form components, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.

## Form groups

The .form-group class is the easiest way to add some structure to forms. It provides a flexible class that encourages proper grouping of labels, components, optional help text, and form validation messaging. By default it only applies margin-bottom, but it picks up additional styles in .form-inline as needed. Use it with <fieldset>s, <div>s, or nearly any other element.

Example label
Another label

## Form grid

More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.

Email
Password
Address
Address 2
City
State
Zip
Check me out

## Form row

You may also swap .row for .form-row, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.

Be sure to use .col-form-label-sm or .col-form-label-lg to your <label>s or <legend>s to correctly follow the size of .form-component-lg and .form-component-sm.

Email
Password
Radios
First radio
Second radio
Third disabled radio
Checkbox
Example checkbox

## Column sizing

As shown in the previous examples, our grid system allows you to place any number of .cols within a .row or .form-row. They’ll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining .cols equally split the rest, with specific column classes like .col-7.

## Inline forms

Use the .form-inline class to display a series of labels, form components, and buttons on a single horizontal row. Form components within inline forms vary slightly from their default states.

- Components are `display: flex`, collapsing any HTML white space and allowing you to provide alignment component with spacing and flexbox utilities.
- Components and input groups receive ``width: auto to override the Material Bootstrap default `width: 100%`.
- Components only appear inline in viewports that are at least 576px wide to account for narrow viewports on mobile devices.

You may need to manually address the width and alignment of individual form components with spacing utilities (as shown below). Lastly, be sure to always include a <label> with each form component, even if you need to hide it from non-screenreader visitors with .sr-only.

Name Username
@
Remember me

## Disabled forms

Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.

    <input class="form-component" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Add the disabled attribute to a <fieldset> to disable all the components within.

Disabled input
Disabled select menu
Can't check this

## Validation

Provide valuable, actionable feedback to your users with HTML5 form validation–available in all our supported browsers. Choose from the browser default validation feedback, or implement custom messages with our built-in classes and starter JavaScript.

### How it works

Here’s how form validation works with Material Bootstrap:

- HTML form validation is applied via CSS’s two pseudo-classes, `:invalid` and `:valid`. It applies to `<input>`, `<select>`, and `<textarea>` elements.
- Material Bootstrap scopes the `:invalid` and `:valid` styles to parent `.was-validated` class, usually applied to the `<form>`. Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted).
- To reset the appearance of the form (for instance, in the case of dynamic form submissions using AJAX), remove the `.was-validated` class from the `<form>` again after submission.

With that in mind, consider the following demos for our custom form validation styles, optional server side classes, and browser defaults.

### Custom styles

For custom Material Bootstrap form validation messages, you’ll need to add the novalidate boolean attribute to your <form>. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you. When attempting to submit, you’ll see the :invalid and :valid styles applied to your form components.

First name
Looks good!
Last name
Looks good!
Username
@
Please choose a username.
City
Please provide a valid city.
State
Please provide a valid state.
Zip
Please provide a valid zip.
Agree to terms and conditions
You must agree before submitting.

## Custom forms

For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form component.

### Checkboxes and radios

The "bootstrap-check-box" and "bootstrap-radio-button" tags display checkboxes and radiobuttons.

### Checkboxes

Check me

The following code should set the checkbox input to inditerminate state

Check me

### Radios

Radio 1 Radio 2

### Switches

The "bootstrap-switch-button" tag renders a custom switch.

Off On

### Select menu

Custom <select> menus need only a custom class, .select to trigger the custom styles. Custom styles are limited to the <select>’s initial appearance and cannot modify the <option>s due to browser limitatio

## Range

Create custom <input type="range"> components with .range. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only IE and Firefox support “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.

## File browser

The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.

Choose file

We hide the default file <input> via opacity and instead style the <label>. The button is generated and positioned with ::after. Lastly, we declare a width and height on the <input> for proper spacing for surrounding content.

### Progress

The "bootstrap-progress-bar" is the custom element which displays a Progress bar.
By adding the 'striped' attribute adds stripes to the progress.

## Material Design

### Switches

Off On

### Radio Buttons

Off On

### Checkbox

Off On

### Range

### Progress

Linear progress bar
Circular progress bar
Text Fields
Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
Agree to terms and conditions
You must agree before submitting.