react-test/docs/translations/api-docs/text-field/text-field.json

{
  "componentDescription": "The `TextField` is a convenience wrapper for the most common cases (80%).\nIt cannot be all things to all people, otherwise the API would grow out of control.\n\n## Advanced Configuration\n\nIt's important to understand that the text field is a simple abstraction\non top of the following components:\n\n- [FormControl](/material-ui/api/form-control/)\n- [InputLabel](/material-ui/api/input-label/)\n- [FilledInput](/material-ui/api/filled-input/)\n- [OutlinedInput](/material-ui/api/outlined-input/)\n- [Input](/material-ui/api/input/)\n- [FormHelperText](/material-ui/api/form-helper-text/)\n\nIf you wish to alter the props applied to the `input` element, you can do so as follows:\n\n```jsx\nconst inputProps = {\n  step: 300,\n};\n\nreturn <TextField id=\"time\" type=\"time\" inputProps={inputProps} />;\n```\n\nFor advanced cases, please look at the source of TextField by clicking on the\n\"Edit this page\" button above. Consider either:\n\n- using the upper case props for passing values directly to the components\n- using the underlying components directly as shown in the demos",
  "propDescriptions": {
    "autoComplete": {
      "description": "This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it&#39;s more like an autofill. You can learn more about it <a href=\"https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill\">following the specification</a>."
    },
    "autoFocus": {
      "description": "If <code>true</code>, the <code>input</code> element is focused during the first mount."
    },
    "classes": { "description": "Override or extend the styles applied to the component." },
    "color": {
      "description": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#custom-colors\">palette customization guide</a>."
    },
    "defaultValue": {
      "description": "The default value. Use when the component is not controlled."
    },
    "disabled": { "description": "If <code>true</code>, the component is disabled." },
    "error": { "description": "If <code>true</code>, the label is displayed in an error state." },
    "FormHelperTextProps": {
      "description": "Props applied to the <a href=\"https://mui.com/material-ui/api/form-helper-text/\"><code>FormHelperText</code></a> element."
    },
    "fullWidth": {
      "description": "If <code>true</code>, the input will take up the full width of its container."
    },
    "helperText": { "description": "The helper text content." },
    "id": {
      "description": "The id of the <code>input</code> element. Use this prop to make <code>label</code> and <code>helperText</code> accessible for screen readers."
    },
    "InputLabelProps": {
      "description": "Props applied to the <a href=\"https://mui.com/material-ui/api/input-label/\"><code>InputLabel</code></a> element. Pointer events like <code>onClick</code> are enabled if and only if <code>shrink</code> is <code>true</code>."
    },
    "inputProps": {
      "description": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes\">Attributes</a> applied to the <code>input</code> element."
    },
    "InputProps": {
      "description": "Props applied to the Input element. It will be a <a href=\"https://mui.com/material-ui/api/filled-input/\"><code>FilledInput</code></a>, <a href=\"https://mui.com/material-ui/api/outlined-input/\"><code>OutlinedInput</code></a> or <a href=\"https://mui.com/material-ui/api/input/\"><code>Input</code></a> component depending on the <code>variant</code> prop value."
    },
    "inputRef": { "description": "Pass a ref to the <code>input</code> element." },
    "label": { "description": "The label content." },
    "margin": {
      "description": "If <code>dense</code> or <code>normal</code>, will adjust vertical spacing of this and contained components."
    },
    "maxRows": {
      "description": "Maximum number of rows to display when multiline option is set to true."
    },
    "minRows": {
      "description": "Minimum number of rows to display when multiline option is set to true."
    },
    "multiline": {
      "description": "If <code>true</code>, a <code>textarea</code> element is rendered instead of an input."
    },
    "name": { "description": "Name attribute of the <code>input</code> element." },
    "onChange": {
      "description": "Callback fired when the value is changed.",
      "typeDescriptions": {
        "event": {
          "name": "event",
          "description": "The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (string)."
        }
      }
    },
    "placeholder": {
      "description": "The short hint displayed in the <code>input</code> before the user enters a value."
    },
    "required": {
      "description": "If <code>true</code>, the label is displayed as required and the <code>input</code> element is required."
    },
    "rows": { "description": "Number of rows to display when multiline option is set to true." },
    "select": {
      "description": "Render a <a href=\"https://mui.com/material-ui/api/select/\"><code>Select</code></a> element while passing the Input element to <code>Select</code> as <code>input</code> parameter. If this option is set you must pass the options of the select as children."
    },
    "SelectProps": {
      "description": "Props applied to the <a href=\"https://mui.com/material-ui/api/select/\"><code>Select</code></a> element."
    },
    "size": { "description": "The size of the component." },
    "slotProps": { "description": "The props used for each slot inside." },
    "slots": { "description": "The components used for each slot inside." },
    "sx": {
      "description": "The system prop that allows defining system overrides as well as additional CSS styles."
    },
    "type": {
      "description": "Type of the <code>input</code> element. It should be <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types\">a valid HTML5 input type</a>."
    },
    "value": {
      "description": "The value of the <code>input</code> element, required for a controlled component."
    },
    "variant": { "description": "The variant to use." }
  },
  "classDescriptions": {},
  "slotDescriptions": {
    "formHelperText": "The component that renders the helper text.",
    "htmlInput": "The html input element.",
    "input": "The component that renders the input.",
    "inputLabel": "The component that renders the input&#39;s label.",
    "root": "The component that renders the root.",
    "select": "The component that renders the select."
  }
}