Design

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.

Example

 

Usage

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.

ProtectedInput

Props

NameDescriptionTypeRequiredDefault
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

Labels

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

{
  show: "Show password",
  hide: "Hide password"
};

Events

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

data-ref-ids

  • 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

Attributes

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.