Input
Input content via mouse or keyboard.
Default
PreviewCode
Textarea
PreviewCode
Size
PreviewCode
Password
PreviewCode
Material
PreviewCode
Disabled
PreviewCode
Props
Input
| Prop | Type | Accepted Values | Description | Default |
|---|---|---|---|---|
| size | string | small | medium | large | huge | Four styles are provided by default, and other styles can be customized using the "sx" prop. | medium |
| sx | object | object | Inline styles for customizing the Input component. Note: Inline styles via the 'style' prop will override 'sx'. | {} |
| type | string | default | textarea | password | Set the input field type by changing the 'type' property. | default |
| maxlength | number | - | Set the maximum number of characters for the input field. | 524288 |
| onChange | function(e) | - | Callback triggered when the input field content changes. | - |
| value | any | - | The initial value of the input field (controlled mode). | - |
| defaultValue | any | - | The initial value of the input field (uncontrolled mode). | - |
| disabled | boolean | boolean | Whether the input is disabled. | false |
| placeholder | string | string | Placeholder text. | - |
| className | string | - | Defines the custom CSS class name for the input field. | - |
MaterialInput
| Prop | Type | Accepted Values | Description | Default | Version |
|---|---|---|---|---|---|
| label | string | string | Placeholder text. | - | - |
| type | string | string | Input type | - | - |
| inputTextStyles | object | object | Customize the text style in the input box | - | 0.3.2 |
| inputFloatStyles | object | object | Customize the float text style in the input box | - | 0.3.2 |
On This Page
Input
Props