Examples and usage guidelines for form component styles, layout options, and custom components for creating a wide variety of forms.
Here’s a quick example to demonstrate Smart.Core’s form styles. Keep reading for documentation on required classes, form layout, and more.
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.
Set heights using classes like .form-component-lg and .form-component-sm.
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.
Set horizontally scrollable range inputs using .form-component-range.
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≶.
Group checkboxes or radios on the same horizontal row by adding .form-check-inline to any .form-check.
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..
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.
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.
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.
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.
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.
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.
display: flex, collapsing any HTML white
space and allowing you to provide alignment component with spacing and flexbox utilities.width: 100%.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.
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.
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.
Here’s how form validation works with Material Bootstrap:
:invalid and :valid.
It applies to <input>, <select>, and <textarea> elements.: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)..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.
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.
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.
The "bootstrap-check-box" and "bootstrap-radio-button" tags display checkboxes and radiobuttons.
The following code should set the checkbox input to inditerminate state
The "bootstrap-switch-button" tag renders a custom switch.
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
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.
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.
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.