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

The password input component supports extensive customization beyond the default styles. This section demonstrates practical styling techniques and advanced customization patterns.

Quick Customization with CSS Custom Properties

For simple customizations, use CSS custom properties directly on the component:

<dap-ds-password-input
label="Custom Styled Password Input"
value="password123"
style={{
  '--dds-input-background': 'var(--dds-brand-100)',
  '--dds-input-border': '2px solid var(--dds-brand-600)',
  '--dds-input-text-color': 'var(--dds-brand-900)',
  '--dds-input-border-radius': 'var(--dds-radius-large)',
}}>
</dap-ds-password-input>
Advanced Styling with CSS Parts

Experiment with custom password input styling using CSS parts and custom properties. The password input component exposes several CSS parts for advanced styling: base, input, label, description, feedback, postfix, show-button, hide-button, show-button-base, hide-button-base, show-icon, hide-icon, and more. Try the presets below or create your own styles:

Rounded StyleGradient ButtonElevated ShadowBorder AccentMinimal DesignColorful HoverLarge ButtonIcon StylingNeon Glow
☀️ Light🌙 Dark
CopyFormatReset
CSS Editor
Live Preview
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
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.
show-buttonThe show button of the password input.
show-button-baseThe base of the show button.
show-button-contentThe content of the show button.
show-iconThe show icon of the password input.
show-icon-baseThe base of the show icon.
hide-buttonThe hide button of the password input.
hide-button-baseThe base of the hide button.
hide-button-contentThe content of the hide button.
hide-iconThe hide icon of the password input.
hide-icon-baseThe base of the hide 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 NameDescription
--dds-input-height-xsThe height of the extra small input. Default is var(--dds-spacing-800).
--dds-input-height-smThe height of the small input. Default is var(--dds-spacing-1000).
--dds-input-height-lgThe height of the large input. Default is var(--dds-spacing-1200).
--dds-input-padding-xsThe padding of the extra small input. Default is 0 var(--dds-spacing-200).
--dds-input-padding-smThe padding of the small input. Default is 0 var(--dds-spacing-300).
--dds-input-padding-lgThe padding of the large input. Default is 0 var(--dds-spacing-400).
--dds-input-font-size-xsThe font size of the extra small input. Default is var(--dds-font-sm).
--dds-input-font-size-smThe font size of the small input. Default is var(--dds-font-base).
--dds-input-font-size-lgThe font size of the large input. Default is var(--dds-font-lg).
--dds-input-borderThe border of the input. Default is var(--dds-border-width-base) solid var(--dds-border-neutral-base).
--dds-input-backgroundThe 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-disabled-borderThe border of the disabled input. Default is 0 solid var(--dds-border-neutral-disabled).
--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-borderThe border of the readonly input. Default is 0 solid var(--dds-border-neutral-subtle).
--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 of the success input. Default is var(--dds-border-width-base) solid var(--dds-border-positive-base).
--dds-input-error-borderThe border of the error input. Default is var(--dds-border-width-base) solid var(--dds-border-negative-base).
--dds-input-addon-backgroundThe background color of the input addon. Default is var(--dds-fields-background-default).
--dds-input-addon-success-backgroundThe background color of the success input addon. Default is var(--dds-fields-background-default).
--dds-input-addon-error-backgroundThe background color of the error input addon. Default is var(--dds-fields-background-default).
--dds-input-addon-border-beforeThe border of the addon before the input. Default is var(--dds-border-width-base) solid var(--dds-border-neutral-base).
--dds-input-addon-border-afterThe 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-beforeThe 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-afterThe 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-borderThe border of the success addon. Default is var(--dds-border-width-base) solid var(--dds-border-positive-base).
--dds-input-addon-success-border-beforeThe 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-afterThe 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-beforeThe 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-afterThe 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-beforeThe 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-afterThe 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-beforeThe 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-afterThe 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.