Number input

Last updated: 2.0.0 (18/01/2024)

Usage

import { NumberInput } from "@valence-ui/core";

function MyComponent() { 
    const [value, setValue] = React.useState(0);

    return ( 
        <NumberInput
            value={value}
            setValue={setValue}
        />
    )
}

Min, max & step

import { NumberInput } from "@valence-ui/core";

function MyComponent() { 
    const [value, setValue] = React.useState(4);

    return ( 
        <NumberInput
            value={value}
            setValue={setValue}
            
            min={0}
            max={10}
            step={2}
        />
    )
}

Hiding or modifying controls

The controls can be entirely hidden using the showControls prop:

import { NumberInput } from "@valence-ui/core";

function MyComponent() { 
    const [value, setValue] = React.useState(0);

    return ( 
        <NumberInput
            value={value}
            setValue={setValue}
            
            showControls={false}
        />
    )
}

Additionally, the icons used can be overridden by the controlIcons prop:

import { NumberInput } from "@valence-ui/core";
import { IconMinus, IconPlus } from "@tabler/icons-react";

function MyComponent() { 
    const [value, setValue] = React.useState(0);

    return ( 
        <NumberInput
            value={value}
            setValue={setValue}
            
            controlIcons={{
                up: <IconPlus />,
                down: <IconMinus />
            }}
        />
    )
}

Props

Extends GenericInputProps<number> and GenericTextInputEventProps.

Property	Type	Description
icon	ReactNode	An icon to display at the left side of this input.
placeholder	string	Text that appears in this input when it has no value.
min	number	The minimum value of this input.
max	number	The maximum value of this input.
step	number	The step value of this input. Defaults to 1.
showControls	boolean	Whether the stepper controls are shown.
controlIcons	{ up?: ReactNode, down?: ReactNode }	Sets custom icons for the stepper control buttons.
grow	boolean	Shorthand for flex-grow = 1.
inputStyle	CSSProperties	Optional styles to apply to the input component.