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

import { RiEthFill } from '@remixicon/react';import { NumberInput } from '@tremor/react';
export function NumberInputUsageExample() {  return (    <div className="mx-auto max-w-sm space-y-8">      <div>        <NumberInput icon={RiEthFill} placeholder="Amount..." />      </div>      <div>        <NumberInput error={true} errorMessage="Number out of bounds" />      </div>      <div>        <NumberInput placeholder="Disabled" disabled={true} />      </div>      <div>        <NumberInput enableStepper={false} />      </div>    </div>  );}

API Reference: NumberInput

client component

defaultValue: The default of NumberInput when it is initially rendered. Use when you do not need to control its state.

value: The controlled state of NumberInput. Must be used in conjunction with onChange.

onValueChange: Event handler called when the state of the input changes.

placeholder: Sets the placehoder text

icon: Set an icon.

error: If true, the text input is labeled as invalid.

errorMessage: Text to be displayed if the error prop is set to `true`.

disabled: If true, the text input will be disabled.

step: The step specifies the interval between legal numbers.

enableStepper: If false, the stepper buttons won't be shown.

min: Min specifies the minimum value for the input element.

max: Max specifies the maximum value for the input element.

Theming

Number Input

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