Security News
Node.js EOL Versions CVE Dubbed the "Worst CVE of the Year" by Security Experts
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
@chakra-ui/number-input
Advanced tools
@chakra-ui/number-input is a component from the Chakra UI library that provides a customizable and accessible number input field. It allows users to input numerical values with ease and provides features such as increment and decrement buttons, value formatting, and validation.
Basic Number Input
This code demonstrates a basic number input with increment and decrement buttons. The input is restricted to values between 10 and 20, with a default value of 15.
import { NumberInput, NumberInputField, NumberInputStepper, NumberIncrementStepper, NumberDecrementStepper } from '@chakra-ui/react';
function BasicNumberInput() {
return (
<NumberInput defaultValue={15} min={10} max={20}>
<NumberInputField />
<NumberInputStepper>
<NumberIncrementStepper />
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>
);
}
Formatted Number Input
This code shows a number input with formatted values. The input allows for two decimal places and increments/decrements by 0.2.
import { NumberInput, NumberInputField } from '@chakra-ui/react';
function FormattedNumberInput() {
return (
<NumberInput defaultValue={15} precision={2} step={0.2}>
<NumberInputField />
</NumberInput>
);
}
Controlled Number Input
This code demonstrates a controlled number input where the value is managed by React state. The input value is updated based on user interaction.
import { useState } from 'react';
import { NumberInput, NumberInputField, NumberInputStepper, NumberIncrementStepper, NumberDecrementStepper } from '@chakra-ui/react';
function ControlledNumberInput() {
const [value, setValue] = useState(10);
return (
<NumberInput value={value} onChange={(valueString) => setValue(parseInt(valueString))}>
<NumberInputField />
<NumberInputStepper>
<NumberIncrementStepper />
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>
);
}
react-number-format is a library for formatting and masking numeric inputs. It provides features like custom formatting, masking, and validation. Compared to @chakra-ui/number-input, it offers more advanced formatting options but lacks the built-in accessibility and styling provided by Chakra UI.
react-numeric-input is a lightweight numeric input component for React. It supports features like custom step intervals, min/max values, and value formatting. While it is simpler and more focused on numeric input, it does not offer the same level of customization and integration with a design system as @chakra-ui/number-input.
rc-input-number is a numeric input component from the rc-components library. It provides basic numeric input functionality with support for increment/decrement buttons, min/max values, and custom step intervals. It is more basic in terms of styling and customization compared to @chakra-ui/number-input.
The NumberInput component is similar to the Input, but it has controls for incrementing or decrementing numeric values.
It follows the WAI-ARIA authoring practices for the Spinbutton widget.
yarn add @chakra-ui/number-input
# or
npm i @chakra-ui/number-input
import {
NumberInput,
NumberInputField,
NumberInputStepper,
NumberIncrementStepper,
NumberDecrementStepper,
} from "@chakra-ui/react"
// TO DO
FAQs
An accessible numeric input alternative to
The npm package @chakra-ui/number-input receives a total of 339,923 weekly downloads. As such, @chakra-ui/number-input popularity was classified as popular.
We found that @chakra-ui/number-input demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.