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.