DÁP Design System - Number input webcomponent

Number input

Number input is a form element that allows the user to enter a number. It provides a way to increase or decrease the value by using the plus and minus buttons.

Design system docs

Examples

Default number input

<dap-ds-number-input label="Number of children"></dap-ds-number-input>

Statuses

<dap-ds-stack direction="column">
  <dap-ds-number-input label="Disabled" disabled></dap-ds-number-input>
  <dap-ds-number-input label="Read only" value="8888" readonly></dap-ds-number-input>
  <dap-ds-number-input label="Success" status="success"></dap-ds-number-input>
  <dap-ds-number-input label="Error" status="error" label="Number" required feedback="wrong number" feedbackType="negative"></dap-ds-number-input>
</dap-ds-stack>

Sizes

<dap-ds-stack direction="column">
  <dap-ds-number-input
    label="XSmall"
    description="This is an extra small number input"
    size="xs"
    feedback="This is a feedback message"
    feedbacktype="negative"
  >
  </dap-ds-number-input>
  <dap-ds-number-input
    label="Small"
    description="This is a small number input"
    size="sm"
    feedback="This is a feedback message"
    feedbacktype="negative"
  >
  </dap-ds-number-input>
  <dap-ds-number-input
    label="Large"
    description="This is a large number input"
    size="lg"
    feedback="This is a feedback message"
    feedbacktype="negative"
  >
  </dap-ds-number-input>
</dap-ds-stack>

Importing

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

Importing React

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

Attributes

Property	Type	Default	Description
`type`	`string`	`'number'`
`label`	`string`		The label of the input.
`placeholder`	`string`		The placeholder of the input.
`description`	`string`		The description of the input.
`tooltip`	`string`		The tooltip of the input.
`tooltipPlacement`	`'top'`, `'right'` , `'bottom'` , `'left'`		The tooltip placement of the input.
`status`	`'success'`, `'error'`		The status of the input. Can be `success` or `error`.
`size`	`'xs'`, `'sm'` , `'sm'`		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.
`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.
`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.
`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 input. Default is false.
`optional`	`boolean`		The optional state of the input.
`optionalLabel`	`string`		The optional label of the input.
`subtle`	`boolean`		The weight of the label. Default is `false`

Slots

Name	Description
`feedback-icon`	The custom icon of the feedback.

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
`postfix`	The postfix of the input.
`decrement`	The decrement button of the input.
`increment`	The increment button 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).