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
- 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
disabledboolean attribute on an input to prevent user input and trigger a slightly different look.
readonlyboolean 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
Switches allow the user to select options. There are two kinds: checkboxes and radio buttons.
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.
Horizontal form elements
Each element above, can also be used in a horizontal layout.