{
  "_copyright": "Copyright (c) 2026, Salesforce, Inc., All rights reserved. For full license text, see the LICENSE.txt file",
  "$schema": "https://slds.lightningdesignsystem.com/schemas/uif-system.v1.json",
  "apiVersion": "1.0.0",
  "name": "Input",
  "description": "Initializes text input",
  "structure": {
    "name": "root",
    "restrict": [
      "div"
    ],
    "description": "Input container",
    "children": [
      {
        "name": "label",
        "restrict": [
          "label",
          "span"
        ],
        "description": "Input label. Renders as a span when there is no associated native input (static read-only display).",
        "attributes": {
          "bound": {
            "for": {
              "prop": "inputId"
            },
            "id": {
              "prop": "labelId"
            }
          },
          "static": {
            "class": "slds-form-element__label"
          }
        },
        "slot": {
          "name": "label",
          "required": true
        },
        "children": [
          {
            "name": "requiredIndicator",
            "restrict": [
              "abbr"
            ],
            "description": "Required-field asterisk shown inside the label when the input is required.",
            "renderWhen": {
              "prop": "required",
              "eq": "true"
            },
            "attributes": {
              "bound": {
                "title": {
                  "prop": "requiredLabel"
                }
              },
              "static": {
                "class": "slds-required",
                "aria-hidden": "true",
                "title": "required"
              }
            }
          }
        ]
      },
      {
        "name": "helpIcon",
        "restrict": [
          "div"
        ],
        "description": "Field-level help affordance: an info button that toggles a tooltip popover.",
        "renderWhen": "slotFilled",
        "children": [
          {
            "name": "helpButton",
            "restrict": [
              "button"
            ],
            "description": "Button that opens the field-level help tooltip.",
            "attributes": {
              "bound": {
                "aria-describedby": {
                  "prop": "helpTooltipId"
                }
              },
              "static": {
                "class": "slds-button slds-button_icon"
              }
            },
            "children": [
              {
                "name": "helpButtonIcon",
                "description": "SVG icon inside the help button.",
                "component": "PrimitiveIcon",
                "attributes": {
                  "static": {
                    "class": "slds-button__icon"
                  }
                },
                "children": [
                  {
                    "name": "helpButtonIconUse"
                  }
                ]
              },
              {
                "name": "helpButtonAssistiveText",
                "restrict": [
                  "span"
                ],
                "description": "Visually hidden label for the help button.",
                "attributes": {
                  "static": {
                    "class": "slds-assistive-text"
                  }
                }
              }
            ]
          },
          {
            "name": "helpPopover",
            "restrict": [
              "div"
            ],
            "description": "Tooltip popover anchored to the help button.",
            "attributes": {
              "bound": {
                "id": {
                  "prop": "helpTooltipId"
                }
              },
              "static": {
                "class": "slds-popover slds-popover_tooltip slds-nubbin_bottom-left",
                "role": "tooltip"
              }
            },
            "slot": {
              "name": "helpTooltip"
            },
            "children": [
              {
                "name": "helpPopoverBody",
                "restrict": [
                  "div"
                ],
                "description": "Body container for the help tooltip text.",
                "attributes": {
                  "static": {
                    "class": "slds-popover__body"
                  }
                }
              }
            ]
          }
        ],
        "attributes": {
          "static": {
            "class": "slds-form-element__icon"
          }
        }
      },
      {
        "name": "inputContainer",
        "restrict": [
          "div"
        ],
        "description": "Container wrapping the native input, inline icons, addons, and any inline spinner.",
        "children": [
          {
            "name": "addonPre",
            "restrict": [
              "span"
            ],
            "description": "Fixed text shown before the input (e.g. a currency symbol).",
            "renderWhen": "slotFilled",
            "attributes": {
              "bound": {
                "id": {
                  "prop": "addonPreId"
                }
              },
              "static": {
                "class": "slds-form-element__addon"
              }
            },
            "slot": {
              "name": "addonPre"
            }
          },
          {
            "name": "iconLeft",
            "description": "Hook for .slds-input-has-icon--left-right",
            "renderWhen": "slotFilled",
            "slot": {
              "name": "iconLeft",
              "restrict": [
                "Icon"
              ]
            },
            "component": "PrimitiveIcon",
            "attributes": {
              "static": {
                "class": "slds-icon slds-input__icon slds-input__icon_left"
              }
            },
            "modifiers": [
              {
                "name": "iconTextDefault",
                "attribute": "class",
                "value": "slds-icon-text-default",
                "description": "Tints the inline icon to the default text color"
              }
            ],
            "children": [
              {
                "name": "iconLeftUse"
              }
            ]
          },
          {
            "name": "iconError",
            "description": "Hook for .slds-input-has-icon",
            "renderWhen": {
              "prop": "hasError",
              "eq": "true"
            },
            "component": "PrimitiveIcon",
            "attributes": {
              "static": {
                "class": "slds-input__icon"
              }
            },
            "children": [
              {
                "name": "iconErrorUse"
              }
            ]
          },
          {
            "name": "input",
            "restrict": [
              "input"
            ],
            "description": "Initializes text input",
            "attributes": {
              "bound": {
                "id": {
                  "prop": "inputId",
                  "required": true
                },
                "type": {
                  "prop": "type"
                },
                "name": {
                  "prop": "name"
                },
                "value": {
                  "prop": "value"
                },
                "placeholder": {
                  "prop": "placeholder"
                },
                "disabled": {
                  "prop": "disabled"
                },
                "readonly": {
                  "prop": "readonly"
                },
                "required": {
                  "prop": "required"
                },
                "maxlength": {
                  "prop": "maxLength"
                },
                "minlength": {
                  "prop": "minLength"
                },
                "pattern": {
                  "prop": "pattern"
                },
                "aria-describedby": {
                  "prop": "ariaDescribedBy"
                },
                "aria-invalid": {
                  "prop": "hasError"
                },
                "aria-labelledby": {
                  "prop": "ariaLabelledBy"
                }
              },
              "static": {
                "class": "slds-input"
              }
            },
            "modifiers": [
              {
                "name": "bare",
                "attribute": "class",
                "value": "slds-input_bare",
                "description": "Removes the input's borders and background"
              },
              {
                "name": "borders",
                "attribute": "class",
                "value": "slds-input_borders",
                "description": "Modifier to allow a [readonly] input to have borders"
              }
            ]
          },
          {
            "name": "addonPost",
            "restrict": [
              "span"
            ],
            "description": "Fixed text shown after the input (e.g. a unit suffix).",
            "renderWhen": "slotFilled",
            "attributes": {
              "bound": {
                "id": {
                  "prop": "addonPostId"
                }
              },
              "static": {
                "class": "slds-form-element__addon"
              }
            },
            "slot": {
              "name": "addonPost"
            }
          },
          {
            "name": "iconRight",
            "description": "Hook for .slds-input-has-icon_left-right",
            "renderWhen": "slotFilled",
            "slot": {
              "name": "iconRight",
              "restrict": [
                "Icon"
              ]
            },
            "component": "PrimitiveIcon",
            "attributes": {
              "static": {
                "class": "slds-icon slds-input__icon slds-input__icon_right"
              }
            },
            "modifiers": [
              {
                "name": "iconTextDefault",
                "attribute": "class",
                "value": "slds-icon-text-default",
                "description": "Tints the inline icon to the default text color"
              }
            ],
            "children": [
              {
                "name": "iconRightUse"
              }
            ]
          },
          {
            "name": "iconRightButton",
            "restrict": [
              "button"
            ],
            "description": "Hook for .slds-input-has-icon_left-right",
            "children": [
              {
                "name": "iconRightButtonIcon",
                "description": "SVG icon inside the trailing action button.",
                "component": "PrimitiveIcon",
                "attributes": {
                  "static": {
                    "class": "slds-button__icon slds-icon-text-light"
                  }
                },
                "children": [
                  {
                    "name": "iconRightButtonUse"
                  }
                ]
              },
              {
                "name": "iconRightButtonAssistiveText",
                "restrict": [
                  "span"
                ],
                "description": "Visually hidden label for the trailing action button.",
                "attributes": {
                  "static": {
                    "class": "slds-assistive-text"
                  }
                }
              }
            ],
            "attributes": {
              "static": {
                "class": "slds-button slds-button_icon slds-input__icon slds-input__icon_right"
              }
            }
          },
          {
            "name": "iconGroupRight",
            "restrict": [
              "div"
            ],
            "description": "Positions the close icon and spinner on the right side of the input while searching",
            "children": [
              {
                "name": "spinner",
                "restrict": [
                  "div"
                ],
                "description": "Inline loading spinner shown inside the input.",
                "renderWhen": {
                  "prop": "loading",
                  "eq": "true"
                },
                "children": [
                  {
                    "name": "spinnerAssistiveText",
                    "restrict": [
                      "span"
                    ],
                    "description": "Visually hidden status text for the spinner.",
                    "attributes": {
                      "static": {
                        "class": "slds-assistive-text"
                      }
                    }
                  },
                  {
                    "name": "spinnerDotA",
                    "restrict": [
                      "div"
                    ],
                    "description": "First animated dot of the spinner.",
                    "attributes": {
                      "static": {
                        "class": "slds-spinner__dot-a"
                      }
                    }
                  },
                  {
                    "name": "spinnerDotB",
                    "restrict": [
                      "div"
                    ],
                    "description": "Second animated dot of the spinner.",
                    "attributes": {
                      "static": {
                        "class": "slds-spinner__dot-b"
                      }
                    }
                  }
                ],
                "attributes": {
                  "static": {
                    "class": "slds-spinner slds-spinner_brand slds-spinner_x-small slds-input__spinner",
                    "role": "status"
                  }
                }
              },
              {
                "name": "iconGroupButton",
                "restrict": [
                  "button"
                ],
                "description": "Hook for .slds-input-has-icon_left-right",
                "children": [
                  {
                    "name": "iconGroupButtonIcon",
                    "description": "SVG icon inside the icon-group button.",
                    "component": "PrimitiveIcon",
                    "attributes": {
                      "static": {
                        "class": "slds-button__icon slds-icon-text-light"
                      }
                    },
                    "children": [
                      {
                        "name": "iconGroupButtonUse"
                      }
                    ]
                  },
                  {
                    "name": "iconGroupButtonAssistiveText",
                    "restrict": [
                      "span"
                    ],
                    "description": "Visually hidden label for the icon-group button.",
                    "attributes": {
                      "static": {
                        "class": "slds-assistive-text"
                      }
                    }
                  }
                ],
                "attributes": {
                  "static": {
                    "class": "slds-button slds-button_icon slds-input__icon slds-input__icon_right"
                  }
                }
              }
            ],
            "attributes": {
              "static": {
                "class": "slds-input__icon-group slds-input__icon-group_right"
              }
            }
          },
          {
            "name": "staticValue",
            "restrict": [
              "span"
            ],
            "description": "Static read-only value rendered in place of a native input.",
            "renderWhen": {
              "prop": "readonly",
              "eq": "static"
            },
            "slot": {
              "name": "staticValue"
            },
            "attributes": {
              "static": {
                "class": "slds-form-element__static"
              }
            }
          }
        ],
        "attributes": {
          "static": {
            "class": "slds-form-element__control"
          }
        },
        "modifiers": [
          {
            "name": "hasIcon",
            "attribute": "class",
            "value": "slds-input-has-icon",
            "description": "Modifier if text input has svg icon adjacent to input"
          },
          {
            "name": "hasFixedAddon",
            "attribute": "class",
            "value": "slds-input-has-fixed-addon",
            "description": "Use on input container to let it know there is fixed text to the left or right of the input"
          }
        ],
        "variants": [
          {
            "name": "iconPosition",
            "description": "Where the inline icon(s) sit relative to the input",
            "options": [
              {
                "value": "left",
                "class": "slds-input-has-icon_left",
                "description": "Positions .slds-input__icon to the left of the text input"
              },
              {
                "value": "right",
                "class": "slds-input-has-icon_right",
                "description": "Positions .slds-input__icon to the right of the text input"
              },
              {
                "value": "left-right",
                "class": "slds-input-has-icon_left-right",
                "description": "Positions .slds-input__icon_left to the left of the text input and .slds-input__icon_right to the right of the text input"
              },
              {
                "value": "group-right",
                "class": "slds-input-has-icon_group-right"
              }
            ]
          }
        ]
      },
      {
        "name": "helpText",
        "restrict": [
          "div"
        ],
        "description": "Help or error message rendered below the input.",
        "renderWhen": "slotFilled",
        "attributes": {
          "bound": {
            "id": {
              "prop": "helpTextId"
            }
          },
          "static": {
            "class": "slds-form-element__help"
          }
        },
        "slot": {
          "name": "helpText"
        }
      }
    ],
    "attributes": {
      "static": {
        "class": "slds-form-element"
      }
    }
  },
  "states": [
    {
      "name": "disabled",
      "type": "boolean",
      "aria": "aria-disabled",
      "description": "Whether the input is disabled"
    },
    {
      "name": "readonly",
      "type": "boolean",
      "aria": "aria-readonly",
      "description": "Whether the input is read-only"
    },
    {
      "name": "required",
      "type": "boolean",
      "aria": "aria-required",
      "description": "Whether the input is required"
    },
    {
      "name": "hasError",
      "type": "boolean",
      "aria": "aria-invalid",
      "description": "Whether the input has a validation error"
    },
    {
      "name": "loading",
      "type": "boolean",
      "description": "Whether the input is showing an inline loading spinner"
    }
  ],
  "accessibility": {
    "requirements": [
      {
        "id": "label-association",
        "description": "Input must have an associated label via for/id, or be labelled via aria-labelledby when addons participate in the accessible name."
      },
      {
        "id": "error-association",
        "description": "Error messages must be associated via aria-describedby and the input must expose aria-invalid='true'."
      },
      {
        "id": "decorative-icon-hidden",
        "description": "Decorative inline icons must be marked aria-hidden='true' so they are not announced to assistive tech."
      },
      {
        "id": "field-level-help",
        "description": "Field-level help tooltips must use role='tooltip' and be referenced from the trigger button via aria-describedby."
      },
      {
        "id": "spinner-status",
        "description": "Inline loading spinners must expose role='status' and a visually-hidden status label."
      }
    ]
  },
  "componentRefs": {
    "PrimitiveIcon": {
      "description": "Bare SVG icon composed directly inside the component. The host node supplies the SVG class (e.g. slds-button__icon, slds-menu__item-icon) via componentProps; PrimitiveIcon contributes the sprite-href binding.",
      "props": {
        "iconName": {
          "type": "string",
          "required": true,
          "description": "Sprite reference for the icon glyph"
        }
      }
    }
  },
  "extensions": {
    "com.salesforce-ux": {
      "dateAdded": "2015-09-04",
      "genReady": false,
      "lbc": "lightning-input"
    }
  },
  "cssSource": "./input.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "stateClasses": [
    {
      "state": "hasError",
      "class": "slds-has-error"
    }
  ]
}