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

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/dist/dds'

Importing React

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

Attributes

Property	Type	Default	Description
`defaultValue`	`string`	`''`
`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.

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