Basic form elements are text fields that allow the user to input text or select a value. They can be single line or multi-line, and can have an icon.
Basic form elements
Basic 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.
Sizes
Set heights using classes like .input-lg
, and set widths using grid column classes like .col-lg-*
.
Input states
-
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.
Validation states
Material Admin includes validation styles for error, warning, and success states on form controls.
Groups
Extend form controls by adding text or buttons before, after, or on both sides of any text-based <input>
.
Switches
Switches allow the user to select options. There are two kinds: checkboxes and radio buttons.
Checkboxes
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
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.
Horizontal form elements
Each element above, can also be used in a horizontal layout.