Form Inputs
Form inputs allow users to enter and edit text.
In Material Admin Pro, our approach to form inputs is twofold. First, we have brought in the textfield and textarea web components from the Material Web Components Catalog, giving developers access to true Material Design text inputs. These web components are reusable, custom elements that have their functionality encapsulated away from the rest of the code, making them concise and easy to use within your web app.
Second, we have restyled the default Bootstrap form controls to match Material Design standards as closely as possible without interfering with the compatability between Bootstrap's form controls and buttons.
Material Textfield
The textfield web component from the Material Web Components Catalog has been utilized in this specific case to add true Material Design form inputs to this theme.
Standard
There are two style variations available for this component, filled and outlined. Take note of how simple the markup is when using a web component.
Disabled
Adding the
disabled
state attribute will apply disabled styling to the textfield and prevent it from being selectable.
Leading Icon
Leading icons can be included within a textfield by using a single data attribute. Add the
icon='{name}'
attribute to the element with
name
being any icon name from the Material Icons library.
Trailing Icon
Trailing icons are also supported inside of the textfield by using a single data attribute. Add the
icontrailing='{name}'
attribute to the element with
name
being any icon name from the Material Icons library.
Helper Text
Helper text can be added to a form input using the
helper='{text}'
attribute, where
text
is the help text you want to display below the form input. The
helperpersistent
attribute will show the helper text at all times. Without it, the helper text will only appear when the input is selected.
Character Counter
Activate the character counter using the
charcounter
attribute, along with the
maxlength='{number}'
attribute, where
number
is the maximum number of characters allowed in the form input.
Full Width
Use the
.w-100
utility class to set the width of the textfield component to equal the full width of it's parent.
Comprehensive Example
All of the above features can be used together on a single textfield component. Below is an exhaustive example of all of the options being used.
Material Textarea
The textarea web component from the Material Web Components Catalog has been utilized in this specific case to add true Material Design text areas to this theme.
Standard
There are two style variations available for this component, filled and outlined. Take note of how simple the markup is when using a web component.
Disabled
Adding the
disabled
state attribute will apply disabled styling to the textarea and prevent it from being selectable.
Helper Text
Helper text can be added to a textarea using the
helper='{text}'
attribute, where
text
is the help text you want to display below the textarea. The
helperpersistent
attribute will show the helper text at all times. Without it, the helper text will only appear when the textarea is selected.
Character Counter
Activate the character counter using the
charcounter
attribute, along with the
maxlength='{number}'
attribute, where
number
is the maximum number of characters allowed in the textarea.
Full Width
Use the
.w-100
utility class to set the width of the textarea component to equal the full width of it's parent.
Comprehensive Example
All of the above features can be used together on a single textarea component. Below is an exhaustive example of all of the options being used.
Default Bootstrap Form Controls
For developers who wish to use Bootstrap's form input markup, the Bootstrap form control has been redesign in a Material Design inspired style while preserving the compatability these elements have with Bootstrap's button component.
Basic Example
The hover state, focus state, label sizing, and font sizing have been restyled to match the look and feel of Material Design.
Sizing
The standard
.form-control-lg
and
.form-control-sm
classes can be used to change the height and other styling applied to a Bootstrap form control. Text inputs are used as an example, however these classes will work with the textarea and select elements as well.
Disabled
Add the
disabled
attribute to either the input or textarea element to see the disabled input styling applied.
File Input
File inputs allow users to choose a file from device storage. They are available in three sizes and allow for multiple files or a single file.
Color Input
The color picker input option gives users an interface to specity a color.
Floating Labels
In Bootstrap 5, Bootstrap has added a floating label option for their input fields. The input and textarea are demonstrated below, but selects are also supported, which you can see on our form selects page.
Bootstrap's floating label elements are similar to the outline style of Material's textfield and textarea components.
These elements require a value in the
placeholder
attribute, even though it will not show.
Related Links
Docs for Material's textfield web component
Docs for Material's textarea web component
Bootstrap's form controls documentation