NumberInput

Numeric input with increment controls

Import: import { NumberInput } from 'react-native-mantine';

Usage

import { useState } from 'react';
import { NumberInput } from 'react-native-mantine';

const [value, setValue] = useState<number | ''>(1);

<NumberInput
  label="Quantity"
  value={value}
  onChange={setValue}
  min={1}
  max={10}
  step={1}
/>

Props

Prop	Type	Default	Description
`label`	`React.ReactNode`		Input label
`description`	`React.ReactNode`		Input description
`error`	`React.ReactNode`		Input error message
`size`	`MantineSize`	`'sm'`	Input size
`radius`	`MantineNumberSize`	`'sm'`	Border radius
`variant`	`'default' \| 'filled' \| 'unstyled'`	`'default'`	Input variant
`fullWidth`	`boolean`	`false`	If true, input will take full width
`min`	`number`		Minimum value
`max`	`number`		Maximum value
`step`	`number`	`1`	Step for increment/decrement
`precision`	`number`	`0`	Number of decimal places
`hideControls`	`boolean`	`false`	If true, controls will be hidden
`value`	`number \| ''`		Current value
`defaultValue`	`number \| ''`		Default value
`onChange`	`(value: number \| '') => void`		Called when value changes
`disabled`	`boolean`	`false`	If true, input will be disabled
`placeholder`	`string`		Placeholder
`icon`	`React.ReactNode`		Icon on the left
`style`	`any`		Additional styles
`wrapperStyle`	`any`		Wrapper style
`accessibilityLabel`	`string`		Accessibility label for the input
`accessibilityHint`	`string`		Accessibility hint for the input
`testID`	`string`		Test identifier used by testing frameworks

Source on GitHub · npm