Basic form elements

• When the field is focused, there will be a thicker line drawn beneath it. The label in this example is always visible.
• The vertical layout can be used in combination with a floating label. With floating labels, when the user engages with the input fields, the labels move to float above the field.

Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*.

• Add the disabled boolean attribute on an input to prevent user input and trigger a slightly different look.
• Add the readonly boolean attribute on an input to prevent user input and style the input as disabled.

Material Admin includes validation styles for error, warning, and success states on form controls.

Extend form controls by adding text or buttons before, after, or on both sides of any text-based <input>.

Checkboxes allow the user to select multiple options from a set.

If you have multiple on/off options appearing in a list, checkboxes are a good way to preserve space.

Checkboxes use animation to communicate focused and pressed states.

Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side.

Radio buttons use animation to communicate focused and pressed states.