Number Input
Number Input lets users enter numeric values with optional spinner controls, supporting solid and subtle styles across multiple sizes and states.
'use client'; import { useState } from 'react';import { NumberInput, Button } from 'sdaia-ui'; Installation
npx sdaia-ui@latest add number-input
Usage
import { NumberInput } from "@/components/ui/number-input"<NumberInput size="large" style="solid" spinner={true} />Default
The default number input with solid style and spinner controls.
'use client'; import { useState } from 'react';import { NumberInput } from 'sdaia-ui'; Examples
Solid
Number input with a solid border style.
'use client'; import { useState } from 'react';import { NumberInput } from 'sdaia-ui'; Subtle
Number input with a subtle underline-only style.
'use client'; import { useState } from 'react';import { NumberInput } from 'sdaia-ui'; With Spinner
Number input with visible increment and decrement spinner buttons.
'use client'; import { useState } from 'react';import { NumberInput } from 'sdaia-ui'; Sizes
Number input available in Large and Medium sizes.
'use client'; import { useState } from 'react';import { NumberInput } from 'sdaia-ui'; Error
Number input in the error state showing a validation message.
Disabled
Number input in the disabled state, preventing interaction.
'use client'; import { NumberInput } from 'sdaia-ui'; export default function NumberInputDisabled() {API Reference
NumberInputProps
Props for the NumberInput component.
Prop | Type | Default | Required |
|---|---|---|---|
label | string | - | optional |
size | 'lg' | 'md' | 'lg' | optional |
style | 'solid' | 'subtle' | 'solid' | optional |
spinner | boolean | false | optional |
value | string | number | - | optional |
defaultValue | string | number | - | optional |
onChange | (value: string) => void | - | optional |
min | number | - | optional |
max | number | - | optional |
step | number | 1 | optional |
error | string | - | optional |
helperText | string | - | optional |
showHelperIcon | boolean | true | optional |
disabled | boolean | false | optional |