DÁP Design System - Input webcomponent

Input

Input component is a form element that allows the user to input data. It can be used in various forms such as text, email, etc. Altough we have separate components for the number and the password input, the input component can be used for the rest of the types.

Design system docs

Examples

Default Input

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

Description

Description can be added to the input field to provide additional information to the user.

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

Feedback message

Feedback message can be added to the input field to provide feedback to the user. Feedback messages can be of two types: error and success and they are handled by the feedbackType attribute.

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

Sizes

Input field can have different sizes. The default size is small.

<dap-ds-stack direction="column">
    <dap-ds-input
      label="Small / Sm"
      placeholder="Enter your name"
    ></dap-ds-input>

    <dap-ds-input
      label="Large/ Lg"
      placeholder="Enter your name"
      size="lg"
    ></dap-ds-input>
  </dap-ds-stack>

Statuses

Input field can have different statuses.

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

Importing

import { DapDSInput } from 'dap-design-system/dist/dds'

Importing React

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

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.

Attributes

Property	Type	Description
`label`	`string`	The label 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.
`placeholder`	`string`	The placeholder of the input.
`description`	`string`	The description of the input.
`tooltip`	`string`	The tooltip of the input.
`status`	`string`	The status of the input. Can be `success` or `error`.
`size`	`'sm' 'lg'`	The size of the input. Default is `sm`. Can be `sm` or `lg`.
`name`	`string`	The name of the input.
`value`	`string`	The value of the input.
`type`	`string`	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.
`feedback`	`string`	The feedback of the input.
`feedbackType`	`'info' 'success' 'error'`	The feedback type of the input. Can be `info`, `success`, or `error`.
`loading`	`boolean`	The loading state of the input. 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
`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.