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.
<dap-ds-number-input label="Number of children"></dap-ds-number-input>
<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>
<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>
Thousand separator is the character that separates the thousands in the number. Every country has a different thousand separator.
In Hungary we use dot . as a thousand separator. This is very important to accessibility to set the correct thousand separator, because the screen reader will recognize the language of the current page and read the number with the correct thousand separator.
Read more about digit grouping.
Do not use space as a thousand separator, because it is not accessible for screen readers.
<dap-ds-number-input label="Thousand separator" value="1234567" thousandSeparator="."> </dap-ds-number-input>
Decimal separator is the character that separates the integer part of the number from the decimal part. Every country has a different decimal separator. In Hungary we use comma as a decimal separator. This is very important to accessibility to set the correct decimal separator, because the screen reader will recognize the language of the current page and read the number with the correct decimal separator. Read more about decimal separators.
<dap-ds-number-input label="Decimal separator" value="12345678,123" decimalSeparator="," thousandSeparator="." ></dap-ds-number-input>
Decimal scale is the number of decimal places that the input will show.
<dap-ds-number-input label="Decimal scale" value="12345678,123334" decimalSeparator="," decimalScale="2"> </dap-ds-number-input>
Disable negative is the state of the input that disables the user from entering negative numbers.
<dap-ds-number-input label="Disable negative" value="-12345678,777" allowNegative="false" decimalScale="2" ></dap-ds-number-input>
Disable decimal is the state of the input that disables the user from entering decimal numbers.
<dap-ds-number-input label="Disable decimal" value="12345678,345" allowDecimal="false" ></dap-ds-number-input>
Hide controls is the state of the input that hides the increment and decrement buttons.
<dap-ds-number-input label="Hide controls" hideControls></dap-ds-number-input>
import { DapDSNumberInput } from 'dap-design-system/dist/dds'
import { DapDSNumberInputReact } from 'dap-design-system/dist/react'
| Property | Type | Default | Description |
|---|---|---|---|
thousandSeparator | string | '' | The thousand separator of the input. |
decimalSeparator | string | ',' | The decimal separator of the input. |
decimalScale | number | The decimal scale of the input. | |
allowNegative | string | 'true' | The allow negative state of the input. |
allowDecimal | string | 'true' | The allow decimal state of the input. |
hideControls | boolean | false | Hides the increment and decrement buttons. |
manualValueSet | boolean | true | |
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 | |
disableEnter | boolean | Disables the enter key from being used to submit the form. |
| Name | Description |
|---|---|
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 |
|---|---|
postfix | The postfix of the input. |
decrement | The decrement button of the input. |
increment | The increment button of the input. |
| 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). |