DÁP Design System - Password input webcomponent

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

Property	Type	Default	Description
`passwordVisibile`	`boolean`	`false`
`type`	`string`	`'password'`
`label`	`string`		The label of the password input.
`placeholder`	`string`		The placeholder of the password input.
`description`	`string`		The description of the password input.
`tooltip`	`string`		The tooltip of the password input.
`tooltipPlacement`	`'top'`, `'right'` , `'bottom'` , `'left'`		The tooltip placement of the input.
`status`	`string`		The status of the password input. Can be `success` or `error`.
`size`	`'xs'`, `'sm'` , `'sm'`		The size of the password input. Default is `sm`.
`name`	`string`		The name of the password input.
`value`	`string`		The value of the password input.
`disabled`	`boolean`		The disabled state of the password input. Default is false.
`required`	`boolean`		The required state of the password input. Default is false.
`readonly`	`boolean`		The readonly state of the password input. Default is false.
`autofocus`	`boolean`		The autofocus state of the password input. Default is false.
`feedback`	`string`		The feedback of the input.
`feedbackType`	`'negative'`, `'positive'` , `'warning'`		The feedback type of the input. Can be `negative`, `positive`, or `warning`.
`loading`	`boolean`		The loading state of the password input. Default is false.
`optional`	`boolean`		The optional state of the password input.
`optionalLabel`	`string`		The optional label of the password input.
`subtle`	`boolean`		The weight of the label. Default is `false`

Slots

No slots available.

Events

Event Name	Description
`dds-change`	Fired when the input value changes.
`dds-input`	Fired when the input value changes.
`dds-keydown`	Fired when a key is pressed down.
`dds-blur`	Fired when the input loses focus.
`dds-focus`	Emitted when the input gains focus.

CSS Parts

Part Name	Description
`postfix`	The postfix of the password input.
`password-input`	The password input.
`password-input--visible`	The visible password input.
`icon`	The icon of the password input.
`icon-base`	The base of the icon.

CSS Custom Properties

Property Name	Description
`--dds-input-height`	The height of the input. Default is var(--dds-spacing-1000).
`--dds-input-padding`	The padding of the input. Default is var(--dds-spacing-300).
`--dds-input-font-size`	The font size of the input. Default is var(--dds-font-base).
`--dds-input-border-color`	The border color of the input. Default is var(--dds-border-neutral-base).
`--dds-input-background-color`	The background color of the input. Default is var(--dds-fields-background-default).
`--dds-input-text-color`	The text color of the input. Default is var(--dds-text-neutral-base).
`--dds-input-border-radius`	The border radius of the input. Default is var(--dds-radius-base).
`--dds-input-border-width`	The border width of the input. Default is var(--dds-border-width-base).
`--dds-input-disabled-background`	The background color of the disabled input. Default is var(--dds-fields-background-disabled).
`--dds-input-disabled-text`	The text color of the disabled input. Default is var(--dds-text-neutral-disabled).
`--dds-input-readonly-background`	The background color of the readonly input. Default is var(--dds-fields-background-read-only).
`--dds-input-readonly-text`	The text color of the readonly input. Default is var(--dds-text-neutral-subtle).
`--dds-input-success-border`	The border color of the success input. Default is var(--dds-border-positive-base).
`--dds-input-error-border`	The border color of the error input. Default is var(--dds-border-negative-base).
`--dds-input-addon-background`	The background color of the input addon. Default is var(--dds-background-ui-neutral-enabled).
`--dds-input-addon-success-background`	The background color of the success input addon. Default is var(--dds-background-ui-positive-enabled).
`--dds-input-addon-error-background`	The background color of the error input addon. Default is var(--dds-background-ui-negative-enabled).