Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
@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
We found that @chakra-ui/number-input demonstrated a healthy version release cadence and project activity because the last version was released less than 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
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.