UI

Number Input

Field to enter and submit numeric input.

Import NumberInput

Tremor exports one component for number input.

import { NumberInput } from '@tremor/react';

Usage example

The example below shows number input examples with an icon property, error message, no stepper buttons, and a disabled state.

Number out of bounds

API Reference: NumberInput

client component
defaultValue
string
The default of NumberInput when it is initially rendered. Use when you do not need to control its state.
value
string
The controlled state of NumberInput. Must be used in conjunction with onChange.
onValueChange
(value: number) => void
Event handler called when the state of the input changes.
placeholder
string

Default: Type...

Sets the placehoder text
icon
React.Element

Default: -

Set an icon.
error
boolean

Default: false

If true, the text input is labeled as invalid.
errorMessage
string
Text to be displayed if the error prop is set to `true`.
disabled
boolean

Default: false

If true, the text input will be disabled.
step
number | string

Default: 1

The step specifies the interval between legal numbers.
enableStepper
boolean

Default: true

If false, the stepper buttons won't be shown.
min
number
Min specifies the minimum value for the input element.
max
number
Max specifies the maximum value for the input element.

Theming

Number Input

Roundness
borderRadiustremor-default
Shadow
boxShadowtremor-input
Font size
fontSizetremor-default
Border color
colorstremor-border-DEFAULT
Border color focus
colorstremor-brand-subtle
Ring color focus
colorstremor-brand-muted
Icon
colorstremor-content-subtle
Background color
colorstremor-background-DEFAULT
Background color disabled
colorstremor-background-subtle
Background color hover
colorstremor-background-muted
Text color placeholder
colorstremor-content-DEFAULT
Text color input
colorstremor-content-emphasis
Text color disabled
colorstremor-content-muted