Edit page

Home

Getting Started

Components

Typography

Utilities

Visualization Components

NumberInput

An input for putting in numbers, with buttons for decrementing and incrementing the value.

Props

children

Func

className

String

[Empty string]

disabled

Bool

false

enableTyping

Bool

true

error

Bool

false

loopRange

Bool

false

max

Number

Infinity

min

Number

-Infinity

name

String

required

onChange

Func

required

showArrows

Bool

true

size

'small' │ 'medium' │ 'large'

'large'

step

Number

value

number │ string

[Empty string]

withLeadingZero

Bool

false

Examples

Default Usage

<Value initial={0}>
  {({ set, value }) => (
    <NumberInput
      name="number-input"
      onChange={(name, value) => set(value)}
      value={value}
    />
  )}
</Value><Value initial={0}>
  {({ set, value }) => (
    <NumberInput
      name="number-input"
      onChange={(name, value) => set(value)}
      value={value}
    />
  )}
</Value>

Uncontrolled Value

<NumberInput
  name="number-input"
  onChange={(name, value) => console.log(value)}
/><NumberInput
  name="number-input"
  onChange={(name, value) => console.log(value)}
/>

Size Modifier

<State initial={{ small: 0, medium: 0, large: 0 }}>
  {({ state, setState }) => (
    <div className="docs-vertical-group">
      <NumberInput
        name="number-input1"
        onChange={(name, value) => setState({ small: value })}
        value={state.small}
        size="small"
      />
      <NumberInput
        name="number-input2"
        onChange={(name, value) => setState({ medium: value })}
        value={state.medium}
      />
      <NumberInput
        name="number-input3"
        onChange={(name, value) => setState({ large: value })}
        value={state.large}
        size="large"
      />
    </div>
  )}
</State><State initial={{ small: 0, medium: 0, large: 0 }}>
  {({ state, setState }) => (
    <div className="docs-vertical-group">
      <NumberInput
        name="number-input1"
        onChange={(name, value) => setState({ small: value })}
        value={state.small}
        size="small"
      />
      <NumberInput
        name="number-input2"
        onChange={(name, value) => setState({ medium: value })}
        value={state.medium}
      />
      <NumberInput
        name="number-input3"
        onChange={(name, value) => setState({ large: value })}
        value={state.large}
        size="large"
      />
    </div>
  )}
</State>

Min And Max Values

<Value initial={0}>
  {({ set, value }) => (
    <NumberInput
      name="number-input"
      onChange={(name, value) => set(value)}
      value={value}
      min={0}
      max={5}
    />
  )}
</Value><Value initial={0}>
  {({ set, value }) => (
    <NumberInput
      name="number-input"
      onChange={(name, value) => set(value)}
      value={value}
      min={0}
      max={5}
    />
  )}
</Value>

Custom Step Value

<Value initial={0}>
  {({ set, value }) => (
    <NumberInput
      name="number-input"
      onChange={(name, value) => set(value)}
      value={value}
      step={5}
    />
  )}
</Value><Value initial={0}>
  {({ set, value }) => (
    <NumberInput
      name="number-input"
      onChange={(name, value) => set(value)}
      value={value}
      step={5}
    />
  )}
</Value>

No Arrow Buttons

<Value initial={0}>
  {({ set, value }) => (
    <NumberInput
      name="number-input"
      onChange={(name, value) => set(value)}
      value={value}
      showArrows={false}
    />
  )}
</Value><Value initial={0}>
  {({ set, value }) => (
    <NumberInput
      name="number-input"
      onChange={(name, value) => set(value)}
      value={value}
      showArrows={false}
    />
  )}
</Value>

Disabled

<Value initial={0}>
  {({ set, value }) => (
    <NumberInput
      name="number-input"
      onChange={(name, value) => set(value)}
      value={value}
      disabled
    />
  )}
</Value><Value initial={0}>
  {({ set, value }) => (
    <NumberInput
      name="number-input"
      onChange={(name, value) => set(value)}
      value={value}
      disabled
    />
  )}
</Value>

Disabled Typing

<Value initial={0}>
  {({ set, value }) => (
    <NumberInput
      name="number-input"
      onChange={(name, value) => set(value)}
      value={value}
      enableTyping={false}
    />
  )}
</Value><Value initial={0}>
  {({ set, value }) => (
    <NumberInput
      name="number-input"
      onChange={(name, value) => set(value)}
      value={value}
      enableTyping={false}
    />
  )}
</Value>

Looped Range

<Value initial={0}>
  {({ set, value }) => (
    <NumberInput
      name="number-input"
      onChange={(name, value) => set(value)}
      value={value}
      min={-5}
      max={5}
      loopRange
    />
  )}
</Value><Value initial={0}>
  {({ set, value }) => (
    <NumberInput
      name="number-input"
      onChange={(name, value) => set(value)}
      value={value}
      min={-5}
      max={5}
      loopRange
    />
  )}
</Value>

Headless NumberInput

<Value initial={0}>
  {({ set, value }) => (
    <NumberInput
      name="number-input"
      onChange={(name, value) => set(value)}
      value={value}
      min={0}
      max={60}
      loopRange
    >
      {({ getInputProps, getDecrementProps, getIncrementProps }) => {
        return (
          <div>
            <div className="icon-section__icon" {...getIncrementProps()}>
              <Icon icon="chevron-up" />
            </div>
            <input {...getInputProps()} />
            <div className="icon-section__icon" {...getDecrementProps()}>
              <Icon icon="chevron-down" />
            </div>
          </div>
        )
      }}
    </NumberInput>
  )}
</Value><Value initial={0}>
  {({ set, value }) => (
    <NumberInput
      name="number-input"
      onChange={(name, value) => set(value)}
      value={value}
      min={0}
      max={60}
      loopRange
    >
      {({ getInputProps, getDecrementProps, getIncrementProps }) => {
        return (
          <div>
            <div className="icon-section__icon" {...getIncrementProps()}>
              <Icon icon="chevron-up" />
            </div>
            <input {...getInputProps()} />
            <div className="icon-section__icon" {...getDecrementProps()}>
              <Icon icon="chevron-down" />
            </div>
          </div>
        )
      }}
    </NumberInput>
  )}
</Value>

NumberInput

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Props

Examples

Props