DÁP Szolgáltatások

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'

Importing React

import { DapDSPasswordInputReact } from 'dap-design-system/react'

Tree-Shakeable Imports

For optimal bundle sizes, use the tree-shakeable import syntax:

import { DapDSPasswordInput } from 'dap-design-system/components'

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	Type
`dds-change`	Fired when the input value changes.	`{value: string }`
`dds-input`	Fired when the input value changes.	`{value: string }`
`dds-keydown`	Fired when a key is pressed down.	`{value: string, originalEvent: Event }`
`dds-blur`	Fired when the input loses focus.	`{void }`
`dds-focus`	Emitted when the input gains focus.	`{void }`

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.

How to Use CSS Parts

You can style CSS parts using the ::part() pseudo-element selector:

/* Target a specific part */
.my-custom-dap-ds-password-input::part(postfix) {
  /* Your custom styles */
}

/* Target multiple parts */
.my-custom-dap-ds-password-input::part(postfix),
.my-custom-dap-ds-password-input::part(password-input) {
  /* Shared styles */
}

Example usage:

<dap-ds-password-input class="my-custom-dap-ds-password-input">
  Password input
</dap-ds-password-input>

.my-custom-dap-ds-password-input::part(postfix) {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

CSS parts allow you to style internal elements of the component while maintaining encapsulation. Learn more in our styling guide.

CSS Custom Properties

Property Name	Description
`--dds-input-height-xs`	The height of the extra small input. Default is var(--dds-spacing-800).
`--dds-input-height-sm`	The height of the small input. Default is var(--dds-spacing-1000).
`--dds-input-height-lg`	The height of the large input. Default is var(--dds-spacing-1200).
`--dds-input-padding-xs`	The padding of the extra small input. Default is 0 var(--dds-spacing-200).
`--dds-input-padding-sm`	The padding of the small input. Default is 0 var(--dds-spacing-300).
`--dds-input-padding-lg`	The padding of the large input. Default is 0 var(--dds-spacing-400).
`--dds-input-font-size-xs`	The font size of the extra small input. Default is var(--dds-font-sm).
`--dds-input-font-size-sm`	The font size of the small input. Default is var(--dds-font-base).
`--dds-input-font-size-lg`	The font size of the large input. Default is var(--dds-font-lg).
`--dds-input-border`	The border of the input. Default is var(--dds-border-width-base) solid var(--dds-border-neutral-base).
`--dds-input-background`	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-disabled-border`	The border of the disabled input. Default is 0 solid var(--dds-border-neutral-disabled).
`--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-border`	The border of the readonly input. Default is 0 solid var(--dds-border-neutral-subtle).
`--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 of the success input. Default is var(--dds-border-width-base) solid var(--dds-border-positive-base).
`--dds-input-error-border`	The border of the error input. Default is var(--dds-border-width-base) solid var(--dds-border-negative-base).
`--dds-input-addon-background`	The background color of the input addon. Default is var(--dds-fields-background-default).
`--dds-input-addon-success-background`	The background color of the success input addon. Default is var(--dds-fields-background-default).
`--dds-input-addon-error-background`	The background color of the error input addon. Default is var(--dds-fields-background-default).
`--dds-input-addon-border-before`	The border of the addon before the input. Default is var(--dds-border-width-base) solid var(--dds-border-neutral-base).
`--dds-input-addon-border-after`	The border of the addon after the input. Default is var(--dds-border-width-base) solid var(--dds-border-neutral-base).
`--dds-input-addon-border-width-before`	The border width of the addon before the input. Default is var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base).
`--dds-input-addon-border-width-after`	The border width of the addon after the input. Default is var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0.
`--dds-input-addon-success-border`	The border of the success addon. Default is var(--dds-border-width-base) solid var(--dds-border-positive-base).
`--dds-input-addon-success-border-before`	The border of the success addon before the input. Default is var(--dds-border-width-base) solid var(--dds-border-positive-base).
`--dds-input-addon-success-border-after`	The border of the success addon after the input. Default is var(--dds-border-width-base) solid var(--dds-border-positive-base).
`--dds-input-addon-success-border-width-before`	The border width of the success addon before the input. Default is var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base).
`--dds-input-addon-success-border-width-after`	The border width of the success addon after the input. Default is var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0.
`--dds-input-addon-error-border-before`	The border of the error addon before the input. Default is var(--dds-border-width-base) solid var(--dds-border-negative-base).
`--dds-input-addon-error-border-after`	The border of the error addon after the input. Default is var(--dds-border-width-base) solid var(--dds-border-negative-base).
`--dds-input-addon-error-border-width-before`	The border width of the error addon before the input. Default is var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base).
`--dds-input-addon-error-border-width-after`	The border width of the error addon after the input. Default is var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0.

How to Use CSS Custom Properties

CSS custom properties (CSS variables) can be set directly on the component or in your stylesheet:

Method 1: Inline styles (Quick customization)

<dap-ds-password-input
  style="--dds-input-height-xs: value; --dds-input-height-sm: value;">
  Password input
</dap-ds-password-input>

Method 2: CSS classes (Reusable styles)

.my-custom-dap-ds-password-input {
  --dds-input-height-xs: value;
  --dds-input-height-sm: value;
  --dds-input-height-lg: value;
}

<dap-ds-password-input class="my-custom-dap-ds-password-input">
  Password input
</dap-ds-password-input>

Method 3: Global theme customization

/* Apply to all instances */
dap-ds-password-input {
  --dds-input-height-xs: value;
  --dds-input-height-sm: value;
}

CSS custom properties inherit through the Shadow DOM, making them perfect for theming. Changes apply immediately without rebuilding.

<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>

<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>

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

Event Name

Description

Type

dds-change

Fired when the input value changes.

{value: string }

dds-input

Fired when the input value changes.

{value: string }

dds-keydown

Fired when a key is pressed down.

{value: string, originalEvent: Event }

dds-blur

Fired when the input loses focus.

{void }

dds-focus

Emitted when the input gains focus.

{void }

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.

/* Target a specific part */ .my-custom-dap-ds-password-input::part(postfix) { /* Your custom styles */ } /* Target multiple parts */ .my-custom-dap-ds-password-input::part(postfix), .my-custom-dap-ds-password-input::part(password-input) { /* Shared styles */ }

Property Name

Description

--dds-input-height-xs

The height of the extra small input. Default is var(--dds-spacing-800).

--dds-input-height-sm

The height of the small input. Default is var(--dds-spacing-1000).

--dds-input-height-lg

The height of the large input. Default is var(--dds-spacing-1200).

--dds-input-padding-xs

The padding of the extra small input. Default is 0 var(--dds-spacing-200).

--dds-input-padding-sm

The padding of the small input. Default is 0 var(--dds-spacing-300).

--dds-input-padding-lg

The padding of the large input. Default is 0 var(--dds-spacing-400).

--dds-input-font-size-xs

The font size of the extra small input. Default is var(--dds-font-sm).

--dds-input-font-size-sm

The font size of the small input. Default is var(--dds-font-base).

--dds-input-font-size-lg

The font size of the large input. Default is var(--dds-font-lg).

--dds-input-border

The border of the input. Default is var(--dds-border-width-base) solid var(--dds-border-neutral-base).

--dds-input-background

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-disabled-border

The border of the disabled input. Default is 0 solid var(--dds-border-neutral-disabled).

--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-border

The border of the readonly input. Default is 0 solid var(--dds-border-neutral-subtle).

--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 of the success input. Default is var(--dds-border-width-base) solid var(--dds-border-positive-base).

--dds-input-error-border

The border of the error input. Default is var(--dds-border-width-base) solid var(--dds-border-negative-base).

--dds-input-addon-background

The background color of the input addon. Default is var(--dds-fields-background-default).

--dds-input-addon-success-background

The background color of the success input addon. Default is var(--dds-fields-background-default).

--dds-input-addon-error-background

The background color of the error input addon. Default is var(--dds-fields-background-default).

--dds-input-addon-border-before

The border of the addon before the input. Default is var(--dds-border-width-base) solid var(--dds-border-neutral-base).

--dds-input-addon-border-after

The border of the addon after the input. Default is var(--dds-border-width-base) solid var(--dds-border-neutral-base).

--dds-input-addon-border-width-before

The border width of the addon before the input. Default is var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base).

--dds-input-addon-border-width-after

The border width of the addon after the input. Default is var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0.

--dds-input-addon-success-border

The border of the success addon. Default is var(--dds-border-width-base) solid var(--dds-border-positive-base).

--dds-input-addon-success-border-before

The border of the success addon before the input. Default is var(--dds-border-width-base) solid var(--dds-border-positive-base).

--dds-input-addon-success-border-after

The border of the success addon after the input. Default is var(--dds-border-width-base) solid var(--dds-border-positive-base).

--dds-input-addon-success-border-width-before

The border width of the success addon before the input. Default is var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base).

--dds-input-addon-success-border-width-after

The border width of the success addon after the input. Default is var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0.

--dds-input-addon-error-border-before

The border of the error addon before the input. Default is var(--dds-border-width-base) solid var(--dds-border-negative-base).

--dds-input-addon-error-border-after

The border of the error addon after the input. Default is var(--dds-border-width-base) solid var(--dds-border-negative-base).

--dds-input-addon-error-border-width-before

The border width of the error addon before the input. Default is var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base).

--dds-input-addon-error-border-width-after

The border width of the error addon after the input. Default is var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0.