DÁP Szolgáltatások

Input

Overview

Input components are fundamental form elements that allow users to enter and edit text data. They provide a consistent interface for collecting various types of textual information, from simple text fields to specialized inputs like email addresses and search queries. The input component supports multiple states, validation feedback, and accessibility features for optimal user experience.

When to Use

✅ Use input components when:

Collecting short-form text data (names, emails, search terms)
Building forms that require user input validation
Creating structured data entry interfaces
Implementing search functionality
Gathering single-line text responses

❌ Don't use input components for:

Multi-line text entry (use textarea instead)
Numeric input with stepper controls (use number input)
Password entry (use password input)
Complex data selection (use select or combobox)
Long-form content creation (use rich text editor)

Design system docs

Examples

Default input

<dap-ds-input
  label="Name"
  placeholder="Enter your name"
></dap-ds-input>

Input with description

Add helpful description text to guide users on what information is expected:

<dap-ds-input
  label="Name"
  placeholder="Enter your name"
  description="Please enter your full name"
></dap-ds-input>

Validation feedback

Provide contextual feedback to users with validation messages. Support both positive and negative feedback states:

<dap-ds-stack direction="column">
  <dap-ds-input
    label="Name"
    placeholder="Enter your name"
    required
    feedback="Please enter your full name"
    feedbackType="negative"
  ></dap-ds-input>

  <dap-ds-input
    label="Name"
    placeholder="Enter your name"
    feedback="Your username is available"
    feedbackType="positive"
  ></dap-ds-input>
</dap-ds-stack>

Input sizes

Choose input sizes based on context and visual hierarchy. Extra small for compact layouts, small for standard forms, and large for prominent inputs:

<dap-ds-stack direction="column">
  <dap-ds-input
    label="Extra small / Xs"
    description="Please enter your full name"
    placeholder="Enter your name"
    size="xs"
    feedback="This is a feedback message"
    feedbackType="negative"
  ></dap-ds-input>

  <dap-ds-input
    label="Small / Sm"
    description="Please enter your full name"
    placeholder="Enter your name"
    feedback="This is a feedback message"
    feedbackType="negative"
  ></dap-ds-input>

  <dap-ds-input
    label="Large/ Lg"
    description="Please enter your full name"
    placeholder="Enter your name"
    size="lg"
    feedback="This is a feedback message"
    feedbackType="negative"
  ></dap-ds-input>
</dap-ds-stack>

Input states

Input components support various states to communicate different conditions to users:

<dap-ds-stack direction="column">

  <dap-ds-input
    label="Loading"
    loading
    placeholder="Enter your name"
  ></dap-ds-input>

  <dap-ds-input
    label="Success"
    placeholder="Enter your name"
    status="success"
    feedback="Your username is available"
    feedbackType="positive"
  ></dap-ds-input>

  <dap-ds-input
    label="Error"
    placeholder="Enter your name"
    status="error"
    required
    feedback="Please enter your full name"
    feedbackType="negative"
  ></dap-ds-input>

  <dap-ds-input
    label="Disabled"
    placeholder="Enter your name"
    disabled
  ></dap-ds-input>

  <dap-ds-input
    label="Readonly"
    value="John Doe"
    placeholder="Enter your name"
    readonly
  ></dap-ds-input>
</dap-ds-stack>

Input types

The input component supports various input types for different data collection needs:

<dap-ds-stack direction="column">
  <dap-ds-input
    label="Email"
    type="email"
    placeholder="user@example.com"
    description="Enter a valid email address"
  ></dap-ds-input>

  <dap-ds-input
    label="Search"
    type="search"
    placeholder="Search products..."
    description="Search through our product catalog"
  ></dap-ds-input>

  <dap-ds-input
    label="URL"
    type="url"
    placeholder="https://example.com"
    description="Enter a valid website URL"
  ></dap-ds-input>

  <dap-ds-input
    label="Phone"
    type="tel"
    placeholder="+36 30 123 4567"
    description="Enter your phone number"
  ></dap-ds-input>
</dap-ds-stack>

Accessibility features

Input components include comprehensive accessibility support for screen readers and keyboard navigation:

<dap-ds-stack direction="column">
  <div>
    <dap-ds-typography variant="h4">Required fields</dap-ds-typography>
    <dap-ds-typography variant="body" style={{marginBottom: 'var(--dds-spacing-300)', color: 'var(--dds-text-neutral-subtle)'}}>
      Properly announced to screen readers with aria-required
    </dap-ds-typography>
    <dap-ds-input
      label="Full Name"
      placeholder="Enter your full name"
      required
      description="This field is required for account creation"
    ></dap-ds-input>
  </div>

  <div>
    <dap-ds-typography variant="h4">Error states</dap-ds-typography>
    <dap-ds-typography variant="body" style={{marginBottom: 'var(--dds-spacing-300)', color: 'var(--dds-text-neutral-subtle)'}}>
      Error messages are announced and associated with the input
    </dap-ds-typography>
    <dap-ds-input
      label="Email Address"
      type="email"
      placeholder="user@example.com"
      value="invalid-email"
      status="error"
      feedback="Please enter a valid email address"
      feedbackType="negative"
      required
    ></dap-ds-input>
  </div>

  <div>
    <dap-ds-typography variant="h4">Success feedback</dap-ds-typography>
    <dap-ds-typography variant="body" style={{marginBottom: 'var(--dds-spacing-300)', color: 'var(--dds-text-neutral-subtle)'}}>
      Positive feedback is announced to confirm successful input
    </dap-ds-typography>
    <dap-ds-input
      label="Username"
      placeholder="Choose a username"
      value="johndoe123"
      status="success"
      feedback="Username is available!"
      feedbackType="positive"
    ></dap-ds-input>
  </div>
</dap-ds-stack>

Real-World Patterns

User Registration Form

<div style={{border: 'var(--dds-border-width-base) solid var(--dds-border-neutral-subtle)', padding: 'var(--dds-spacing-600)', borderRadius: 'var(--dds-radius-base)'}}>
<dap-ds-stack>
  <dap-ds-typography variant="h4">Create Account</dap-ds-typography>
  <dap-ds-stack direction="column">
    <dap-ds-input
      label="Full Name"
      placeholder="Enter your full name"
      required
      description="First and last name as it appears on official documents"
    ></dap-ds-input>
    
    <dap-ds-input
      label="Email Address"
      type="email"
      placeholder="user@example.com"
      required
      description="We'll send confirmation to this email"
    ></dap-ds-input>
    
    <dap-ds-input
      label="Username"
      placeholder="Choose a unique username"
      required
      description="Username must be 3-20 characters, letters and numbers only"
      status="success"
      feedback="Username is available!"
      feedbackType="positive"
    ></dap-ds-input>
    
    <dap-ds-input
      label="Phone Number"
      type="tel"
      placeholder="+36 30 123 4567"
      description="Optional: For account security notifications"
    ></dap-ds-input>
  </dap-ds-stack>
</dap-ds-stack>
</div>

Custom Styling

Quick customization with CSS custom properties

Many visual tweaks can be achieved by overriding the built-in CSS variables directly on the component instance:

<dap-ds-input
  label="Custom brand input"
  placeholder="Try typing here"
  description="Overrides a few CSS variables"
  value="Custom value"
  style={{
    '--dds-input-border': '1px dashed var(--dds-brand-600)',
    '--dds-input-border-radius': 'var(--dds-radius-xlarge)',
    '--dds-input-background': 'var(--dds-white-100)',
    '--dds-input-text-color': 'var(--dds-brand-900)',
    '--dds-input-padding-sm': 'var(--dds-spacing-500)',
  }}
></dap-ds-input>

Advanced styling with CSS parts

The input component exposes several CSS parts (base, input, label, description, prefix, postfix, addon-before, addon-after, tooltip, feedback) that can be targeted for deep customization. Experiment with the live editor below or start from one of the presets:

CSS Editor

Live Preview

Implementation Notes

Form Validation Best Practices

The input component integrates seamlessly with form validation patterns:

Real-time Validation

Provide immediate feedback as users type:

// Example validation implementation
const emailInput = document.querySelector('dap-ds-input[type="email"]');
emailInput.addEventListener('input', (event) => {
  const value = event.target.value;
  const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
  
  if (value && !isValid) {
    event.target.status = 'error';
    event.target.feedback = 'Please enter a valid email address';
    event.target.feedbackType = 'negative';
  } else if (value && isValid) {
    event.target.status = 'success';
    event.target.feedback = 'Email format is valid';
    event.target.feedbackType = 'positive';
  } else {
    event.target.status = '';
    event.target.feedback = '';
  }
});

Security Considerations

1. Input Sanitization

Always sanitize user input on the server side:

// Client-side validation (for UX only)
function validateInput(value, type) {
  switch(type) {
    case 'email':
      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
    case 'url':
      try {
        new URL(value);
        return true;
      } catch {
        return false;
      }
    default:
      return value.length > 0;
  }
}

// Server-side validation and sanitization is still required

2. CSP Considerations

Ensure Content Security Policy compatibility:

<!-- Use nonce for inline styles if needed -->
<dap-ds-input
  style="--dds-input-border-color: var(--dds-brand-600);"
  nonce="your-nonce-here"
></dap-ds-input>

Importing

import { DapDSInput } from 'dap-design-system'

Importing React

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

Tree-Shakeable Imports

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

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

Attributes

Property	Type	Description
`label`	`string`	The label of the input.
`description`	`string`	The description of the input.
`optionalLabel`	`string`	Text of optional label.
`subtle`	`boolean`	Text weight of label. If true the label is subtle. Default value is false.
`value`	`string`	The value of the input.
`placeholder`	`string`	The placeholder of the input.
`loading`	`boolean`	The loading state of the input. Default is false.
`tooltip`	`string`	The tooltip of the input.
`tooltipPlacement`	`'top'`, `'right'` , `'bottom'` , `'left'`	The tooltip placement of the input.
`tooltipAriaLabel`	`string`	The aria label of the tooltip.
`feedback`	`string`	The feedback of the input.
`feedbackType`	`'negative'`, `'positive'` , `'warning'`	The feedback type of the input. Can be `negative`, `positive`, or `warning`.
`status`	`'succes'`, `'error'`	The status of the input. Can be `success` or `error`.
`size`	`'xs'`, `'sm'` , `'lg'`	The size of the input. Default is `sm`.
`name`	`string`	The name of the input.
`type`	`'text'`, `'number'` , `'button'` , `'color'` , `'email'` , `'hidden'` , `'reset'` , `'submit'` , `'url'` , `'password'`, `'file'` , `'time'`	The type of the input. Default is 'text'.
`disabled`	`boolean`	The disabled state of the input. Default is false.
`required`	`boolean`	The required state of the input. Default is false.
`readonly`	`boolean`	The readonly state of the input. Default is false.
`autofocus`	`boolean`	The autofocus state of the input. Default is false.
`autocapitalize`	`boolean`	The autocapitalize state of the input. Default is false.
`minlength`	`number`	The minimum length of the input.
`maxlength`	`number`	The maximum length of the input.
`min`	`number`	The minimum value of the number input.
`max`	`number`	The maximum value of the number input.
`step`	`number`	The step value of the number input.
`inputmode`	`string`	The inputmode of the input.
`pattern`	`string`	The regex pattern of the input.

Slots

Name	Description
`postfix`	The postfix of the input.
`prefix`	The prefix of the input.
`addon-before`	The addon before the input.
`addon-after`	The addon after the input.
`feedback-icon`	The custom icon of the feedback.

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
`base`	The main input container.
`input`	The input element.
`label`	The label of the input.
`description`	The description of the input.
`feedback`	The feedback of the input.
`tooltip`	The tooltip of the input.
`addon-before`	The addon before the input.
`addon-after`	The addon after the input.
`prefix`	The prefix of the input.
`postfix`	The postfix of the input.

How to Use CSS Parts

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

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

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

Example usage:

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

.my-custom-dap-ds-input::part(base) {
  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-input
  style="--dds-input-height-xs: value; --dds-input-height-sm: value;">
  Input
</dap-ds-input>

Method 2: CSS classes (Reusable styles)

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

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

Method 3: Global theme customization

/* Apply to all instances */
dap-ds-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-input label="Name" placeholder="Enter your name" required feedback="Please enter your full name" feedbackType="negative" ></dap-ds-input> <dap-ds-input label="Name" placeholder="Enter your name" feedback="Your username is available" feedbackType="positive" ></dap-ds-input> </dap-ds-stack>

<dap-ds-stack direction="column"> <dap-ds-input label="Extra small / Xs" description="Please enter your full name" placeholder="Enter your name" size="xs" feedback="This is a feedback message" feedbackType="negative" ></dap-ds-input> <dap-ds-input label="Small / Sm" description="Please enter your full name" placeholder="Enter your name" feedback="This is a feedback message" feedbackType="negative" ></dap-ds-input> <dap-ds-input label="Large/ Lg" description="Please enter your full name" placeholder="Enter your name" size="lg" feedback="This is a feedback message" feedbackType="negative" ></dap-ds-input> </dap-ds-stack>

<dap-ds-stack direction="column"> <dap-ds-input label="Loading" loading placeholder="Enter your name" ></dap-ds-input> <dap-ds-input label="Success" placeholder="Enter your name" status="success" feedback="Your username is available" feedbackType="positive" ></dap-ds-input> <dap-ds-input label="Error" placeholder="Enter your name" status="error" required feedback="Please enter your full name" feedbackType="negative" ></dap-ds-input> <dap-ds-input label="Disabled" placeholder="Enter your name" disabled ></dap-ds-input> <dap-ds-input label="Readonly" value="John Doe" placeholder="Enter your name" readonly ></dap-ds-input> </dap-ds-stack>

<dap-ds-stack direction="column"> <dap-ds-input label="Email" type="email" placeholder="user@example.com" description="Enter a valid email address" ></dap-ds-input> <dap-ds-input label="Search" type="search" placeholder="Search products..." description="Search through our product catalog" ></dap-ds-input> <dap-ds-input label="URL" type="url" placeholder="https://example.com" description="Enter a valid website URL" ></dap-ds-input> <dap-ds-input label="Phone" type="tel" placeholder="+36 30 123 4567" description="Enter your phone number" ></dap-ds-input> </dap-ds-stack>

<dap-ds-stack direction="column"> <div> <dap-ds-typography variant="h4">Required fields</dap-ds-typography> <dap-ds-typography variant="body" style={{marginBottom: 'var(--dds-spacing-300)', color: 'var(--dds-text-neutral-subtle)'}}> Properly announced to screen readers with aria-required </dap-ds-typography> <dap-ds-input label="Full Name" placeholder="Enter your full name" required description="This field is required for account creation" ></dap-ds-input> </div> <div> <dap-ds-typography variant="h4">Error states</dap-ds-typography> <dap-ds-typography variant="body" style={{marginBottom: 'var(--dds-spacing-300)', color: 'var(--dds-text-neutral-subtle)'}}> Error messages are announced and associated with the input </dap-ds-typography> <dap-ds-input label="Email Address" type="email" placeholder="user@example.com" value="invalid-email" status="error" feedback="Please enter a valid email address" feedbackType="negative" required ></dap-ds-input> </div> <div> <dap-ds-typography variant="h4">Success feedback</dap-ds-typography> <dap-ds-typography variant="body" style={{marginBottom: 'var(--dds-spacing-300)', color: 'var(--dds-text-neutral-subtle)'}}> Positive feedback is announced to confirm successful input </dap-ds-typography> <dap-ds-input label="Username" placeholder="Choose a username" value="johndoe123" status="success" feedback="Username is available!" feedbackType="positive" ></dap-ds-input> </div> </dap-ds-stack>

<div style={{border: 'var(--dds-border-width-base) solid var(--dds-border-neutral-subtle)', padding: 'var(--dds-spacing-600)', borderRadius: 'var(--dds-radius-base)'}}> <dap-ds-stack> <dap-ds-typography variant="h4">Create Account</dap-ds-typography> <dap-ds-stack direction="column"> <dap-ds-input label="Full Name" placeholder="Enter your full name" required description="First and last name as it appears on official documents" ></dap-ds-input> <dap-ds-input label="Email Address" type="email" placeholder="user@example.com" required description="We'll send confirmation to this email" ></dap-ds-input> <dap-ds-input label="Username" placeholder="Choose a unique username" required description="Username must be 3-20 characters, letters and numbers only" status="success" feedback="Username is available!" feedbackType="positive" ></dap-ds-input> <dap-ds-input label="Phone Number" type="tel" placeholder="+36 30 123 4567" description="Optional: For account security notifications" ></dap-ds-input> </dap-ds-stack> </dap-ds-stack> </div>

<dap-ds-input label="Custom brand input" placeholder="Try typing here" description="Overrides a few CSS variables" value="Custom value" style={{ '--dds-input-border': '1px dashed var(--dds-brand-600)', '--dds-input-border-radius': 'var(--dds-radius-xlarge)', '--dds-input-background': 'var(--dds-white-100)', '--dds-input-text-color': 'var(--dds-brand-900)', '--dds-input-padding-sm': 'var(--dds-spacing-500)', }} ></dap-ds-input>

// Example validation implementation const emailInput = document.querySelector('dap-ds-input[type="email"]'); emailInput.addEventListener('input', (event) => { const value = event.target.value; const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value); if (value && !isValid) { event.target.status = 'error'; event.target.feedback = 'Please enter a valid email address'; event.target.feedbackType = 'negative'; } else if (value && isValid) { event.target.status = 'success'; event.target.feedback = 'Email format is valid'; event.target.feedbackType = 'positive'; } else { event.target.status = ''; event.target.feedback = ''; } });

// Client-side validation (for UX only) function validateInput(value, type) { switch(type) { case 'email': return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value); case 'url': try { new URL(value); return true; } catch { return false; } default: return value.length > 0; } } // Server-side validation and sanitization is still required

Property

Type

Default

Description

label

string

The label of the input.

description

string

The description of the input.

optionalLabel

string

Text of optional label.

subtle

boolean

Text weight of label. If true the label is subtle. Default value is false.

value

string

The value of the input.

placeholder

string

The placeholder of the input.

loading

boolean

The loading state of the input. Default is false.

tooltip

string

The tooltip of the input.

tooltipPlacement

'top', 'right' , 'bottom' , 'left'

The tooltip placement of the input.

tooltipAriaLabel

string

The aria label of the tooltip.

feedback

string

The feedback of the input.

feedbackType

'negative', 'positive' , 'warning'

The feedback type of the input. Can be negative, positive, or warning.

status

'succes', 'error'

The status of the input. Can be success or error.

size

'xs', 'sm' , 'lg'

The size of the input. Default is sm.

name

string

The name of the input.

type

'text', 'number' , 'button' , 'color' , 'email' , 'hidden' , 'reset' , 'submit' , 'url' , 'password', 'file' , 'time'

The type of the input. Default is 'text'.

disabled

boolean

The disabled state of the input. Default is false.

required

boolean

The required state of the input. Default is false.

readonly

boolean

The readonly state of the input. Default is false.

autofocus

boolean

The autofocus state of the input. Default is false.

autocapitalize

boolean

The autocapitalize state of the input. Default is false.

minlength

number

The minimum length of the input.

maxlength

number

The maximum length of the input.

min

number

The minimum value of the number input.

max

number

The maximum value of the number input.

step

number

The step value of the number input.

inputmode

string

The inputmode of the input.

pattern

string

The regex pattern of the input.

Name

Description

postfix

The postfix of the input.

prefix

The prefix of the input.

addon-before

The addon before the input.

addon-after

The addon after the input.

feedback-icon

The custom icon of the feedback.

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

base

The main input container.

input

The input element.

label

The label of the input.

description

The description of the input.

feedback

The feedback of the input.

tooltip

The tooltip of the input.

addon-before

The addon before the input.

addon-after

The addon after the input.

prefix

The prefix of the input.

postfix

The postfix of the input.

/* Target a specific part */ .my-custom-dap-ds-input::part(base) { /* Your custom styles */ } /* Target multiple parts */ .my-custom-dap-ds-input::part(base), .my-custom-dap-ds-input::part(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.