Input fields
Vue Bootstrap 5 Input fields
Vue Input fields refer specifically to the text input fields, which are used to obtain data from the users.
Basic example
A basic example of the input field consists of the MDBInput component with specified label property and v-model directive for creating two-way data bindings.
Sizing
Set heights using size property like size="lg" or size="sm".
Disabled
Add the disabled boolean attribute on a component to give it a grayed out appearance and remove pointer events.
Readonly
Add the readonly boolean attribute on a component to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.
Types
Input types let you specified what data users should provide and help you validate it.
Text
Password
Number
Phone number
URL
Textarea
Text
Block-level or inline-level form text can be created using .form-text.
Associating form text with form controls
Form text should be explicitly associated with the form control it relates to using the aria-describedby attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control.
Form text below inputs can be added with formText property. If a block-level element will be used, a top margin is added for easy spacing from the inputs above.
Inline text can use any typical inline HTML element (be it a <span>, <small>, or something else) with nothing more than the .form-text class.
Helper text
Add helper property with text to the input to create helper text.
Character counter
Add counter property and set the maxlength property to create a counter.
Icons
Trailing icon
Add class trailing to MDBIcon component to create trailing icon in the input.
Dark background
When placing an input on the dark background add white propery to provide proper contrast.