react-test/docs/translations/api-docs-joy/autocomplete/autocomplete.json

{
  "componentDescription": "",
  "propDescriptions": {
    "aria-describedby": {
      "description": "Identifies the element (or elements) that describes the object."
    },
    "aria-label": { "description": "Defines a string value that labels the current element." },
    "aria-labelledby": {
      "description": "Identifies the element (or elements) that labels the current element."
    },
    "autoComplete": {
      "description": "If <code>true</code>, the portion of the selected suggestion that the user hasn&#39;t typed, known as the completion string, appears inline after the input cursor in the textbox. The inline completion string is visually highlighted and has a selected state."
    },
    "autoFocus": {
      "description": "If <code>true</code>, the <code>input</code> element is focused during the first mount."
    },
    "autoHighlight": {
      "description": "If <code>true</code>, the first option is automatically highlighted."
    },
    "autoSelect": {
      "description": "If <code>true</code>, the selected option becomes the value of the input when the Autocomplete loses focus unless the user chooses a different option or changes the character string in the input.<br>When using the <code>freeSolo</code> mode, the typed value will be the input value if the Autocomplete loses focus without highlighting an option."
    },
    "blurOnSelect": {
      "description": "<p>Control if the input should be blurred when an option is selected:</p>\n<ul>\n<li><code>false</code> the input is not blurred.</li>\n<li><code>true</code> the input is always blurred.</li>\n<li><code>touch</code> the input is blurred after a touch event.</li>\n<li><code>mouse</code> the input is blurred after a mouse event.</li>\n</ul>\n"
    },
    "clearIcon": { "description": "The icon to display in place of the default clear icon." },
    "clearOnBlur": {
      "description": "If <code>true</code>, the input&#39;s text is cleared on blur if no value is selected.<br>Set it to <code>true</code> if you want to help the user enter a new value. Set it to <code>false</code> if you want to help the user resume their search."
    },
    "clearOnEscape": {
      "description": "If <code>true</code>, clear all values when the user presses escape and the popup is closed."
    },
    "clearText": {
      "description": "Override the default text for the <em>clear</em> icon button.<br>For localization purposes, you can use the provided <a href=\"https://mui.com/material-ui/guides/localization/\">translations</a>."
    },
    "closeText": {
      "description": "Override the default text for the <em>close popup</em> icon button.<br>For localization purposes, you can use the provided <a href=\"https://mui.com/material-ui/guides/localization/\">translations</a>."
    },
    "color": {
      "description": "The color of the component. It supports those theme colors that make sense for this component."
    },
    "defaultValue": {
      "description": "The default value. Use when the component is not controlled."
    },
    "disableClearable": { "description": "If <code>true</code>, the input can&#39;t be cleared." },
    "disableCloseOnSelect": {
      "description": "If <code>true</code>, the popup won&#39;t close when a value is selected."
    },
    "disabled": { "description": "If <code>true</code>, the component is disabled." },
    "disabledItemsFocusable": {
      "description": "If <code>true</code>, will allow focus on disabled items."
    },
    "disableListWrap": {
      "description": "If <code>true</code>, the list box in the popup will not wrap focus."
    },
    "endDecorator": { "description": "Trailing adornment for this input." },
    "error": {
      "description": "If <code>true</code>, the <code>input</code> will indicate an error. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component."
    },
    "filterOptions": {
      "description": "A function that determines the filtered options to be rendered on search.",
      "typeDescriptions": {
        "options": { "name": "options", "description": "The options to render." },
        "state": { "name": "state", "description": "The state of the component." }
      }
    },
    "filterSelectedOptions": {
      "description": "If <code>true</code>, hide the selected options from the list box."
    },
    "forcePopupIcon": { "description": "Force the visibility display of the popup icon." },
    "freeSolo": {
      "description": "If <code>true</code>, the Autocomplete is free solo, meaning that the user input is not bound to provided options."
    },
    "getLimitTagsText": {
      "description": "The label to display when the tags are truncated (<code>limitTags</code>).",
      "typeDescriptions": {
        "more": { "name": "more", "description": "The number of truncated tags." }
      }
    },
    "getOptionDisabled": {
      "description": "Used to determine the disabled state for a given option.",
      "typeDescriptions": { "option": { "name": "option", "description": "The option to test." } }
    },
    "getOptionKey": {
      "description": "Used to determine the key for a given option. This can be useful when the labels of options are not unique (since labels are used as keys by default).",
      "typeDescriptions": {
        "option": { "name": "option", "description": "The option to get the key for." }
      }
    },
    "getOptionLabel": {
      "description": "Used to determine the string value for a given option. It&#39;s used to fill the input (and the list box options if <code>renderOption</code> is not provided).<br>If used in free solo mode, it must accept both the type of the options and a string."
    },
    "groupBy": {
      "description": "If provided, the options will be grouped under the returned string. The groupBy value is also used as the text for group headings when <code>renderGroup</code> is not provided.",
      "typeDescriptions": {
        "options": { "name": "options", "description": "The options to group." }
      }
    },
    "handleHomeEndKeys": {
      "description": "If <code>true</code>, the component handles the &quot;Home&quot; and &quot;End&quot; keys when the popup is open. It should move focus to the first option and last option, respectively."
    },
    "id": {
      "description": "This prop is used to help implement the accessibility logic. If you don&#39;t provide an id it will fall back to a randomly generated one."
    },
    "includeInputInList": {
      "description": "If <code>true</code>, the highlight can move to the input."
    },
    "inputValue": { "description": "The input value." },
    "isOptionEqualToValue": {
      "description": "Used to determine if the option represents the given value. Uses strict equality by default. ⚠️ Both arguments need to be handled, an option can only match with one value.",
      "typeDescriptions": {
        "option": { "name": "option", "description": "The option to test." },
        "value": { "name": "value", "description": "The value to test against." }
      }
    },
    "limitTags": {
      "description": "The maximum number of tags that will be visible when not focused. Set <code>-1</code> to disable the limit."
    },
    "loading": {
      "description": "If <code>true</code>, the component is in a loading state. This shows the <code>loadingText</code> in place of suggestions (only if there are no suggestions to show, for example <code>options</code> are empty)."
    },
    "loadingText": {
      "description": "Text to display when in a loading state.<br>For localization purposes, you can use the provided <a href=\"https://mui.com/material-ui/guides/localization/\">translations</a>."
    },
    "multiple": {
      "description": "If <code>true</code>, <code>value</code> must be an array and the menu will support multiple selections."
    },
    "name": { "description": "Name attribute of the <code>input</code> element." },
    "noOptionsText": {
      "description": "Text to display when there are no options.<br>For localization purposes, you can use the provided <a href=\"https://mui.com/material-ui/guides/localization/\">translations</a>."
    },
    "onChange": {
      "description": "Callback fired when the value changes.",
      "typeDescriptions": {
        "event": { "name": "event", "description": "The event source of the callback." },
        "value": { "name": "value", "description": "The new value of the component." },
        "reason": {
          "name": "reason",
          "description": "One of &quot;createOption&quot;, &quot;selectOption&quot;, &quot;removeOption&quot;, &quot;blur&quot; or &quot;clear&quot;."
        }
      }
    },
    "onClose": {
      "description": "Callback fired when the popup requests to be closed. Use in controlled mode (see open).",
      "typeDescriptions": {
        "event": { "name": "event", "description": "The event source of the callback." },
        "reason": {
          "name": "reason",
          "description": "Can be: <code>&quot;toggleInput&quot;</code>, <code>&quot;escape&quot;</code>, <code>&quot;selectOption&quot;</code>, <code>&quot;removeOption&quot;</code>, <code>&quot;blur&quot;</code>."
        }
      }
    },
    "onHighlightChange": {
      "description": "Callback fired when the highlight option changes.",
      "typeDescriptions": {
        "event": { "name": "event", "description": "The event source of the callback." },
        "option": { "name": "option", "description": "The highlighted option." },
        "reason": {
          "name": "reason",
          "description": "Can be: <code>&quot;keyboard&quot;</code>, <code>&quot;auto&quot;</code>, <code>&quot;mouse&quot;</code>, <code>&quot;touch&quot;</code>."
        }
      }
    },
    "onInputChange": {
      "description": "Callback fired when the input value changes.",
      "typeDescriptions": {
        "event": { "name": "event", "description": "The event source of the callback." },
        "value": { "name": "value", "description": "The new value of the text input." },
        "reason": {
          "name": "reason",
          "description": "Can be: <code>&quot;input&quot;</code> (user input), <code>&quot;reset&quot;</code> (programmatic change), <code>&quot;clear&quot;</code>, <code>&quot;blur&quot;</code>, <code>&quot;selectOption&quot;</code>, <code>&quot;removeOption&quot;</code>"
        }
      }
    },
    "onOpen": {
      "description": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).",
      "typeDescriptions": {
        "event": { "name": "event", "description": "The event source of the callback." }
      }
    },
    "open": { "description": "If <code>true</code>, the component is shown." },
    "openOnFocus": { "description": "If <code>true</code>, the popup will open on input focus." },
    "openText": {
      "description": "Override the default text for the <em>open popup</em> icon button.<br>For localization purposes, you can use the provided <a href=\"https://mui.com/material-ui/guides/localization/\">translations</a>."
    },
    "options": { "description": "Array of options." },
    "placeholder": { "description": "The input placeholder" },
    "popupIcon": { "description": "The icon to display in place of the default popup icon." },
    "readOnly": {
      "description": "If <code>true</code>, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted."
    },
    "renderGroup": {
      "description": "Render the group.",
      "typeDescriptions": { "params": { "name": "params", "description": "The group to render." } }
    },
    "renderOption": {
      "description": "Render the option, use <code>getOptionLabel</code> by default.",
      "typeDescriptions": {
        "props": { "name": "props", "description": "The props to apply on the li element." },
        "option": { "name": "option", "description": "The option to render." },
        "state": { "name": "state", "description": "The state of the component." }
      }
    },
    "renderTags": {
      "description": "Render the selected value.",
      "typeDescriptions": {
        "value": {
          "name": "value",
          "description": "The <code>value</code> provided to the component."
        },
        "getTagProps": { "name": "getTagProps", "description": "A tag props getter." },
        "ownerState": {
          "name": "ownerState",
          "description": "The state of the Autocomplete component."
        }
      }
    },
    "required": {
      "description": "If <code>true</code>, the <code>input</code> element is required. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component."
    },
    "selectOnFocus": {
      "description": "If <code>true</code>, the input&#39;s text is selected on focus. It helps the user clear the selected value."
    },
    "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." },
    "startDecorator": { "description": "Leading adornment for this input." },
    "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 autocomplete.<br>The value must have reference equality with the option in order to be selected. You can customize the equality behavior with the <code>isOptionEqualToValue</code> prop."
    },
    "variant": {
      "description": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use."
    }
  },
  "classDescriptions": {
    "colorContext": {
      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "color inversion is triggered"
    },
    "colorDanger": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"danger\"</code>"
    },
    "colorNeutral": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"neutral\"</code>"
    },
    "colorPrimary": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"primary\"</code>"
    },
    "colorSuccess": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"success\"</code>"
    },
    "colorWarning": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"warning\"</code>"
    },
    "disabled": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>disabled={true}</code>"
    },
    "error": {
      "description": "State class applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>error={true}</code>"
    },
    "focused": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "the component is focused"
    },
    "formControl": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "the component is a descendant of <code>FormControl</code>"
    },
    "hasClearIcon": { "description": "Class name applied when the clear icon is rendered." },
    "hasPopupIcon": { "description": "Class name applied when the popup icon is rendered." },
    "multiple": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the wrapper element",
      "conditions": "<code>multiple={true}</code>"
    },
    "popupIndicatorOpen": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the popup indicator",
      "conditions": "the popup is open"
    },
    "sizeLg": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>size=\"lg\"</code>"
    },
    "sizeMd": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>size=\"md\"</code>"
    },
    "sizeSm": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>size=\"sm\"</code>"
    },
    "variantOutlined": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>variant=\"outlined\"</code>"
    },
    "variantPlain": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>variant=\"plain\"</code>"
    },
    "variantSoft": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>variant=\"soft\"</code>"
    },
    "variantSolid": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>variant=\"solid\"</code>"
    }
  },
  "slotDescriptions": {
    "clearIndicator": "The component that renders the clear indicator.",
    "endDecorator": "The component that renders the end decorator.",
    "input": "The component that renders the input.",
    "limitTag": "The component that renders the limit tag.",
    "listbox": "The component that renders the listbox.",
    "loading": "The component that renders the loading.",
    "noOptions": "The component that renders the no-options.",
    "option": "The component that renders the option.",
    "popupIndicator": "The component that renders the popup indicator.",
    "root": "The component that renders the root.",
    "startDecorator": "The component that renders the start decorator.",
    "wrapper": "The component that renders the wrapper."
  }
}