Password input

Password input component is a form element that allows the user to enter a password. It provides a way to hide the password while typing.

Design system docs Examples Default password input 
<dap-ds-password-input label="Password" description="Enter your password" value="password"></dap-ds-password-input>
Sizes

Password input component comes in two sizes: small and large. The default size is sm.

<dap-ds-stack direction="column">
  <dap-ds-password-input
    label="XSmall"
    description="This is an extra small password input"
    value="password"
    size="xs"
    feedback="This is a feedback message"
    feedbacktype="negative"
  >
  </dap-ds-password-input>
  <dap-ds-password-input
    label="Small"
    description="This is a small password input"
    value="password"
    size="sm"
    feedback="This is a feedback message"
    feedbacktype="negative"
  >
  </dap-ds-password-input>
  <dap-ds-password-input
    label="Large"
    description="This is a large password input"
    value="password"
    size="lg"
    feedback="This is a feedback message"
    feedbacktype="negative"
  >
  </dap-ds-password-input>
</dap-ds-stack>
Statuses 
<dap-ds-stack direction="column">
  <dap-ds-password-input label="Disabled" value="password" disabled></dap-ds-password-input>
  <dap-ds-password-input label="Success" status="success" value="password"></dap-ds-password-input>
  <dap-ds-password-input label="Error" status="error" value="password" required feedback="Wrong password" feedbackType="negative"></dap-ds-password-input>
</dap-ds-stack>
Importing 
import { DapDSPasswordInput } from 'dap-design-system/dist/dds'
Importing React 
import { DapDSPasswordInputReact } from 'dap-design-system/dist/react'
Attributes
PropertyTypeDefaultDescription
passwordVisibilebooleanfalse
typestring'password'
labelstringThe label of the password input.
placeholderstringThe placeholder of the password input.
descriptionstringThe description of the password input.
tooltipstringThe tooltip of the password input.
tooltipPlacement'top', 'right' , 'bottom' , 'left'The tooltip placement of the input.
statusstringThe status of the password input. Can be success or error.
size'xs', 'sm' , 'sm'The size of the password input. Default is sm.
namestringThe name of the password input.
valuestringThe value of the password input.
disabledbooleanThe disabled state of the password input. Default is false.
requiredbooleanThe required state of the password input. Default is false.
readonlybooleanThe readonly state of the password input. Default is false.
autofocusbooleanThe autofocus state of the password input. Default is false.
feedbackstringThe feedback of the input.
feedbackType'negative', 'positive' , 'warning'The feedback type of the input. Can be negative, positive, or warning.
loadingbooleanThe loading state of the password input. Default is false.
optionalbooleanThe optional state of the password input.
optionalLabelstringThe optional label of the password input.
subtlebooleanThe weight of the label. Default is false
Slots

No slots available.

Events
Event NameDescriptionType
dds-changeFired when the input value changes.{value: string }
dds-inputFired when the input value changes.{value: string }
dds-keydownFired when a key is pressed down.{value: string, originalEvent: Event }
dds-blurFired when the input loses focus.{void }
dds-focusEmitted when the input gains focus.{void }
CSS Parts
Part NameDescription
postfixThe postfix of the password input.
password-inputThe password input.
password-input--visibleThe visible password input.
iconThe icon of the password input.
icon-baseThe base of the icon.
CSS Custom Properties
Property NameDescription
--dds-input-heightThe height of the input. Default is var(--dds-spacing-1000).
--dds-input-paddingThe padding of the input. Default is var(--dds-spacing-300).
--dds-input-font-sizeThe font size of the input. Default is var(--dds-font-base).
--dds-input-border-colorThe border color of the input. Default is var(--dds-border-neutral-base).
--dds-input-background-colorThe background color of the input. Default is var(--dds-fields-background-default).
--dds-input-text-colorThe text color of the input. Default is var(--dds-text-neutral-base).
--dds-input-border-radiusThe border radius of the input. Default is var(--dds-radius-base).
--dds-input-border-widthThe border width of the input. Default is var(--dds-border-width-base).
--dds-input-disabled-backgroundThe background color of the disabled input. Default is var(--dds-fields-background-disabled).
--dds-input-disabled-textThe text color of the disabled input. Default is var(--dds-text-neutral-disabled).
--dds-input-readonly-backgroundThe background color of the readonly input. Default is var(--dds-fields-background-read-only).
--dds-input-readonly-textThe text color of the readonly input. Default is var(--dds-text-neutral-subtle).
--dds-input-success-borderThe border color of the success input. Default is var(--dds-border-positive-base).
--dds-input-error-borderThe border color of the error input. Default is var(--dds-border-negative-base).
--dds-input-addon-backgroundThe background color of the input addon. Default is var(--dds-background-ui-neutral-enabled).
--dds-input-addon-success-backgroundThe background color of the success input addon. Default is var(--dds-background-ui-positive-enabled).
--dds-input-addon-error-backgroundThe background color of the error input addon. Default is var(--dds-background-ui-negative-enabled).