TextField

Overview

Text Field allows users to enter text into a UI. It typically appears in forms and dialogs.

Please refer to this for more information: https://mui.com/material-ui/react-text-field/.

Import

CODE

import { TextField } from '@mui/material';

The above source will be imported automatically after dragging and dropping the Basic Component to the UI Preview Panel.

Property

Property:

Name	Default	Description
Id-name	Placeholder: <id-name>	The Id-name of the created component.
State	State: Normal	The State of the created Component.
Margin and Padding	Size Unit: Px	The component Margin and Padding with many selectable Size Units.
Size	Type: None Size Unit: Px Full-width: False	The component Size of Type, Width and Height with many selectable Size Units, and Full-width.
Layout	Position: None Size Unit: Px	The component Layout includes Position and Top - Right - Bottom - Left with many selectable Size Units.
Label	Font-family: None Size Unit: Px Font-weight: None Text-align: Left	The component Label includes Text, Font-family, Font-size, Font-weight, Size Unit, Font-color, Text-align.
General	Visibility: None Disabled: false Required: false Error: false Read-only: false Adornment: Blank Blank Opacity: 100%	The component General includes DRL Variables, Visibility, Disabled, Required, Error, Type, Read-only, Adornment, DefaultValue, Value, Placeholder, Helper-text, Opacity, and Background.
Advanced Style		The component Advanced Style includes Classname and Inline Style addition.

Code Sample:

CODE

<TextField
          sx={{':active': {'margin': '25px 25px 20px','padding': '25px 25px 20px',
              '.MuiInputBase-root': { 'width': '150px', 'height': '120px' },
              'position': 'absolute','top': '15px','right': '25px','bottom': '15px','left': '25px',
              '& label': {'fontWeight': 'lighter','fontSize': '15px','color': '#fa0000ff','textAlign': 'center',},
              'visibility': 'hidden',},}}
              size="small"
              fullWidth={true}
              label="Label1"
              disabled={true}
              required={true}
              error={true}
              type="date"
              InputProps={{ 'readOnly': true }}
              defaultValue={15}>
</TextField>