Text Fields
Bootstrap 4 Text Fields with Material Design UI
Text Fields allow users to enter some data in the UI. They are mostly used in forms and modal boxes.
Bootstrap 4 Text Fields
Bootstrap 4 has some global styling defined for each of the individual form controls. All textual <input> and <textarea> elements with.form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.
Propeller Text Fields
Propeller Text Fields consists of Bootstrap 4 HTML structure with Propeller customized classes based on material design standards.
Add .pmd-textfield and .pmd-textfield-floating-label to the parent div to customize Bootstrap 4 text fields into Propeller text fields which contains a line which is focused and a label that floats when the user selects it.
Propeller Outline Text Fields
Use .pmd-textfield-outline next to .pmd-textfield to create an outline text field.
Propeller Filled Text Fields
Use .pmd-textfield-filled next to .pmd-textfield to create a text field with filled background.
Propeller Text Fields without Floating Label
Remove .pmd-textfield-floating-label class to remove the floating effect in the Text Fields.
Text Field Sizes
Bootstrap 4 provides Text Fields in various sizes: small, default and large. Add class .col-form-label-lg in <label> tag and .form-control-lg in <input> tag to create a large text field while add class .col-form-label-sm in <label> tag and .form-control-sm in <input> tag to create a small text field.
Readonly State
Add the readonly boolean attribute on an input to prevent user input and style the input as disabled.
Readonly with Plain Text
Add .form-control-plaintext to the input to display its value as plain text.
Disabled State
Create disbaled input by adding the disabled boolean attribute on an input to prevent user input and trigger a slightly different look.
Inverse Text Fields
Use .bg-dark and .text-white to the card structure to create an inverse form.
Text Field Validation
Propeller provides validation states for error, and success states on form controls. Add .is-valid to the text field and .valid-feedback to the <div> containing the validation message in order to create a success text field. Similarly, add .is-invalid and .invalid-feedback to create error text field.
Configuration Options
The table lists some HTML attributes that are required for positioning and styling of the Text Fields.
| Propeller Class | Effect | Remark |
|---|---|---|
.pmd-textfield |
Class added for general label and input formatting. | Required |
.pmd-textfield-floating-label |
Adds floating animation to the label of input | Optional |
.pmd-textfield-outline |
Add this class to create Propeller outline input | Optional |
.pmd-textfield-filled |
Add this class to create Propeller filled input | Optional |
jQuery Plugin
Call the jQuery plugin to initialize the textfield and textarea while fetching the data dynamically.