Number input – Carbon Design System

Preview the number input component with the React live demo. For detailed code usage documentation, see the Storybooks for each framework below.

Documentation

React

Angular (Community)

Vue (Community)

Live demo

Theme selector

Variant selector

Number input label

Optional helper text

CodeSandbox React Angular Vue Vanilla


    <NumberInput
      helperText="Optional helper text"
      id="tj-input"
      invalidText="Number is not valid"
      label="Number input label"
      max={100}
      min={0}
      step={10}
      value={50}
    />


    <NumberInput
      helperText="Optional helper text"
      id="tj-input"
      invalidText="Number is not valid"
      label="Number input label"
      max={100}
      min={0}
      step={10}
      value={50}
    />

Edit this page on GitHub

Number input: Style

Number input: Accessibility