Protected Input consist of a protected text string, a Input component, and an Icon Button that acts as a toggle between protected and unprotected states. They should inherit all states as well as both internal and external padding specifications from the standard text input field.




Used in scenarios where sensitive user information must be entered into a computer interface discreetly. Protected input components should primarily focus on keeping user information private.



modelValueValue to be placed in the inputStringfalse-
labelText label for the inputStringtrue-
hintHint text to be displayed below the inputStringfalse-
errorError text to be displayed below the inputStringfalse-
disabledPuts the input into a disabled stateBooleanfalsefalse
labelsObject containing labels to be used by this component. Mainly used for i18n or customization of labels. See Labels exampleObjectfalseSee Labels example


Text labels for Protected Input can be customized via the labels property. The default labels values are:

  show: "Show password",
  hide: "Hide password"


  • update:modelValue - emitted when there is a new value


  • feather-input - on the input element
  • feather-form-element-label - on the label text element
  • feather-form-element-hint - on the hint text element
  • feather-form-element-error - on the error text element
  • feather-input-password-icon - on the show password element


Specifying a class or data-ref-id attribute will cause them to be applied to the component's root container div. All other attributes are inherited to the input where it makes sense. Some will be ignored if they conflict with some of the attributes used for accessibility.