...

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