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.

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

The number input component supports extensive customization beyond the default styles. This section demonstrates practical styling techniques and advanced customization patterns.

For simple customizations, use CSS custom properties directly on the component:

<dap-ds-number-input
label="Custom Styled Number Input"
value="12345"
thousandSeparator="."
style={{
  '--dds-input-background': 'var(--dds-brand-100)',
  '--dds-input-border': '2px solid var(--dds-brand-600)',
  '--dds-input-text-color': 'var(--dds-brand-900)',
  '--dds-input-border-radius': 'var(--dds-radius-large)',
}}>
</dap-ds-number-input>

Experiment with custom number input styling using CSS parts and custom properties. The number input component exposes several CSS parts for advanced styling: base, input, label, description, feedback, postfix, increment-button, decrement-button, increment-button-base, decrement-button-base, and more. Try the presets below or create your own styles:

import { DapDSNumberInput } from 'dap-design-system'

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

For optimal bundle sizes, use the tree-shakeable import syntax:

import { DapDSNumberInput } from 'dap-design-system/components'

You can style CSS parts using the ::part() pseudo-element selector:

/* Target a specific part */
.my-custom-dap-ds-number-input::part(base) {
  /* Your custom styles */
}

/* Target multiple parts */
.my-custom-dap-ds-number-input::part(base),
.my-custom-dap-ds-number-input::part(input) {
  /* Shared styles */
}

Example usage:

<dap-ds-number-input class="my-custom-dap-ds-number-input">
  Number input
</dap-ds-number-input>

.my-custom-dap-ds-number-input::part(base) {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

CSS custom properties (CSS variables) can be set directly on the component or in your stylesheet:

Method 1: Inline styles (Quick customization)

<dap-ds-number-input
  style="--dds-input-height-xs: value; --dds-input-height-sm: value;">
  Number input
</dap-ds-number-input>

Method 2: CSS classes (Reusable styles)

.my-custom-dap-ds-number-input {
  --dds-input-height-xs: value;
  --dds-input-height-sm: value;
  --dds-input-height-lg: value;
}

<dap-ds-number-input class="my-custom-dap-ds-number-input">
  Number input
</dap-ds-number-input>

Method 3: Global theme customization

/* Apply to all instances */
dap-ds-number-input {
  --dds-input-height-xs: value;
  --dds-input-height-sm: value;
}