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="Small"></dap-ds-number-input>
    <dap-ds-number-input label="Large" size="lg"></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'
Slots
NameDescription
feedback-iconThe custom icon of the feedback.
Attributes
PropertyTypeDefaultDescription
labelstringThe label of the input.
placeholderstringThe placeholder of the input.
descriptionstringThe description of the input.
tooltipstringThe tooltip of the input.
status'success' 'error'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.
namestringThe name of the input.
valuestringThe value of the input.
disabledbooleanThe disabled state of the input. Default is false.
requiredbooleanThe required state of the input. Default is false.
readonlybooleanThe readonly state of the input. Default is false.
autofocusbooleanThe autofocus state of the input. Default is false.
minnumberThe minimum value of the number input.
maxnumberThe maximum value of the number input.
stepnumberThe step value of the number input.
feedbackstringThe feedback of the input.
feedbackType'info' 'success' 'error'The feedback type of the input. Can be info, success, or error.
loadingbooleanThe loading state of the input. Default is false.
optionalbooleanThe optional state of the input.
optionalLabelstringThe optional label of the input.
subtlebooleanThe weight of the label. Default is false
Events
Event NameDescription
dds-changeFired when the input value changes.
dds-inputFired when the input value changes.
dds-keydownFired when a key is pressed down.
dds-blurFired when the input loses focus.
dds-focusEmitted when the input gains focus.
CSS Parts
Part NameDescription
postfixThe postfix of the input.
decrementThe decrement button of the input.
incrementThe increment button of the input.