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="Small" value="password"></dap-ds-password-input>
    <dap-ds-password-input label="Large" size="lg" value="password"></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'

Slots

No slots available.

Attributes

Property	Type	Description
`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.
`status`	`string`	The status of the password input. Can be `success` or `error`.
`size`	`'sm' 'lg'`	The size of the password input. Default is `sm`. Can be `sm` or `lg`.
`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`	`'info' 'success' 'error'`	The feedback type of the password input. Can be `info`, `success`, or `error`.
`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`

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.