DXC Logo
Halstack logo
Halstack
Design system
v6.0.0
OverviewIntroduction
PrinciplesColorSpacingTypographyLayoutThemesLocalization
ComponentsAccordionAlertApplication layoutBleedBoxBulleted ListButtonCardCheckboxChipDate InputDialogDropdownFile InputFlexFooterHeaderHeadingInsetLinkNav TabsNumber InputPaginatorParagraphPassword InputProgress BarQuick NavRadio GroupResultset TableSelectSidenavSliderSpinnerSwitchTableTabsTagText InputTextareaToggle GroupTypographyWizard

Number Input

Ready

The number input is a text input component that only allows numerical values and it has controls for incrementing or decrementing them.

Specifications

Design specifications of the number input component
Design specifications of the number input component

The number input color, typography, border, spacing, width and margin specifications are inherited from the text input, for reference check the text input component documentation.

States

Input

States: enabled, hover, focus, error and disabled.

Input states example
Input states example

Spin button

States: enabled, hover, focus, active and disabled.

Spin button states example
Spin button states example

Anatomy

Anatomy of the number input component
  1. 1.
    Label
  2. 2.
    Helper text (Optional)
  3. 3.
    Suffix (Optional)
  4. 4.
    Container
  5. 5.
    Spin button increase
  6. 6.
    Spin button decrease
  7. 7.
    Error indicator
  8. 8.
    Error message
  9. 9.
    Value

Accessibility

WAI-ARIA

Contents

Edit this page on GitHub
Previous
Nav Tabs
NextPaginator