Text fields

Text fields allow users to input text and usually appear in forms. Users may enter text, numbers, or mixed-format types of input.

Basic Cards

To show this type of Text fields you will need this code in down here.

     
<div className="row">
    <div className="col-md-3 col-12">
        <Input
                defaultValue="Hello world"
                className="w-100 mb-3"
                inputProps={{'aria-label': 'Description', }} />
    </div>
    <div className="col-md-3 col-12">
        <Input
                placeholder="Placeholder"
                className="w-100 mb-3"
                inputProps={{'aria-label': 'Description', }} />
    </div>
    <div className="col-md-3 col-12">
        <Input
                value="Disabled"
                className="w-100 mb-3"
                disabled
                inputProps={{'aria-label': 'Description', }} />
    </div>
    <div className="col-md-3 col-12">
        <Input
                defaultValue="Error"
                className="w-100 mb-3"
                error
                inputProps={{'aria-label': 'Description', }} />
    </div>
</div>
  

Available parameters, type and descriptions are down below.

Name	Type	Default	Description
autoComplete	string		This property helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it here: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill
autoFocus	bool		If true, the input will be focused during the first mount.
defaultValue	union: string |  number		The default value of the Input element.
disabled	bool		If true, the input will be disabled.
error	bool		If true, the label will be displayed in an error state.
FormHelperTextProps	object		Properties applied to the FormHelperText element.
fullWidth	bool		If true, the input will take up the full width of its container.
helperText	node		The helper text content.
id	string		The id of the input element. Use that property to make label and helperText accessible for screen readers.
InputLabelProps	object		Properties applied to the InputLabel element.
InputProps	object		Properties applied to the Input element.
inputProps	object		Properties applied to the native input element.
inputRef	func		Use that property to pass a ref callback to the native input component.
label	node		The label content.
margin	enum: 'none' |  'dense' |  'normal'		If dense or normal, will adjust vertical spacing of this and contained components.
multiline	bool		If true, a textarea element will be rendered instead of an input.
name	string		Name attribute of the input element.
onChange	func		Callback fired when the value is changed. Signature: function(event: object) => void event: The event source of the callback. You can pull out the new value by accessing event.target.value.
placeholder	string		The short hint displayed in the input before the user enters a value.
required	bool	false	If true, the label is displayed as required.
rows	union: string |  number		Number of rows to display when multiline option is set to true.
rowsMax	union: string |  number		Maximum number of rows to display when multiline option is set to true.
select	bool	false	Render a Select element while passing the Input element to Select as input parameter. If this option is set you must pass the options of the select as children.
SelectProps	object		Properties applied to the Select element.
type	string		Type attribute of the Input element. It should be a valid HTML5 input type.
value	union: string |  number |  arrayOf		The value of the Input element, required for a controlled component.