Input fields
React Bootstrap 5 Input fields component
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 input
element with specified
ID
and label
element connected via this ID
with the
input. Both elements are wrapped in .form-outline
class which provides a material
design look.
Controlled value
Add value
property to set the value of the input field. You can also use the
onChange
event to handle the value change.
Sizing
Set heights using properties like size="lg"
and size="sm"
.
Disabled
Add the disabled
boolean property on an input to give it a grayed out appearance
and remove pointer events.
Readonly
Add the readonly
boolean property on an input 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 styled with .form-text
. 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 class form-helper
to div
to create helper text.
Character counter
Set maxLength
and showCounter
attributes.
Icons
Trailing icon
Add class trailing
to i
tag to create trailing icon in the input.
Dark background
When placing an input on the dark background add contrast
property to provide
proper contrast.
Input fields - API
Import
Properties
MDBInput
Name | Type | Default | Description | Example |
---|---|---|---|---|
contrast
|
boolean | '' |
Sets the dark background for the MDBInput |
<MDBInput contrast type="text" id="inputExample" />
|
defaultValue
|
string | '' |
Default value of the input |
<MDBInput defaultValue='test' />
|
disabled
|
string | '' |
Makes the MDBInput disabled |
<MDBInput disabled type="text" id="inputExample" />
|
id
|
string | '' |
Defines an id for the MDBInput |
<MDBInput type="text" id="inputExample" />
|
ref
|
React.RefObject |
undefined |
Reference to input element |
<MDBInput ref={inputReference} />
|
label
|
React.ReactNode | '' |
Defines a label text for the MDBInput |
<MDBInput label="Example label" type="text" id="inputExample" />
|
labelId
|
string | '' |
Defines an id for the label |
<MDBInput label="Example label" labelId="exampleLabel" type="text" id="inputExample" />
|
labelClass
|
string | '' |
Adds custom classes to the label |
<MDBInput label="Example label" labelId="exampleLabel" labelClass="test-class" type="text" id="inputExample" />
|
labelRef
|
React.RefObject | undefined |
Reference to label element |
<MDBInput labelRef={labelReference}
|
labelStyle
|
React.CSSProperties | undefined |
Adds custom styles to the label |
<MDBInput label="Example label" labelStyle={{color: 'red'}} />
|
name
|
string | '' |
Specifies the name for the MDBInput |
<MDBInput name="sampleName" type="text" id="inputExample" />
|
readonly
|
boolean | false |
Makes the MDBInput read only |
<MDBInput readonly type="text" id="inputExample" />
|
size
|
string | '' |
Sets the size of the MDBInput |
<MDBInput size="lg" type="text" id="inputExample" />
|
value
|
string | '' |
Sets the value for the MDBInput |
<MDBInput value="Example value" type="text" id="inputExample" />
|
wrapperTag
|
string | '' |
Defines a tag type for the wrapper of the MDBInput |
<MDBInput wrapperTag="span" id="exampleID" type="text" id="inputExample" />
|
wrapperClass
|
string | '' |
Adds custom classes to the wrapper of the MDBInput |
<MDBInput wrapperClass="custom-class" type="text" id="inputExample" />
|
wrapperStyle
|
React.CSSProperties | undefined |
Adds custom styles to the wrapper |
<MDBInput label="Example label" wrapperStyle={{color: 'red'}} />
|
MDBTextArea
Name | Type | Default | Description | Example |
---|---|---|---|---|
cols
|
number | undefined |
Textarea cols number |
<MDBTextArea cols={3} />
|
rows
|
number | undefined |
Textarea rows number |
<MDBTextArea rows={3} />
|