Number input

The number input is a number specific input type. Use it when you need numerical data from the user.

#Usage

import { NumberInput } from '@kinsta/stratus'

const MyComponent = () => (
  <NumberInput
    steps={10}
    label="Type a number"
  />
)
Copy

Controlled example:

import type { JSX } from 'react'
import { useState } from 'react'
import { NumberInput } from '@kinsta/stratus'

const MyComponent = (): JSX.Element | null => {
  const [inputValue, setInputValue] = useState(0)

  return (
      <NumberInput
        value={inputValue}
        onChange={setInputValue}
      />
  )
}
Copy

Example with tooltip:

import { NumberInput } from '@kinsta/stratus'
import { useState } from 'react'

const MyComponent = () => (
 const [inputValue, setInputValue] = useState(0)

 const minValue = 0
 const maxValue = 3
 
  return (
    <NumberInput
      value={inputValue}
      onChange={setInputValue}
      min={minValue}
      max={maxValue}
      tooltip={{
        max: {
          content: 'You reached the maximum value',
          shouldShowOnMinMaxLimitReached: true,
        },
      }}
    />
  )
)
Copy

#Props

#Types

• NumberInputInterface: props of the NumberInput component extended by Omit<InputInterface, 'type' | 'isReadOnly' | 'onChange' | 'addonBefore' | 'addonAfter'>

Read more about types here

#See also

• Input