Nexus KitNumberInput
NumberInput is used to enter a number, and increase or decrease the value using the stepper buttons.
default
import NumberInput from "@/components/ui/NumberInput";
export default function Page() {
return (
<NumberInput className="max-w-80" defaultValue={2} />
)
}size
import NumberInput from "@/components/ui/NumberInput";
export default function Page() {
return (
<div className="flex items-center gap-4">
<NumberInput size="sm" />
<NumberInput size="md" />
<NumberInput size="lg" />
</div>
)
}min and max
import NumberInput from "@/components/ui/NumberInput";
export default function Page() {
return (
<NumberInput min={2} max={20} className="max-w-80" />
)
}step
import NumberInput from "@/components/ui/NumberInput";
export default function Page() {
return (
<NumberInput step={2} className="max-w-80" />
)
}disabled
import NumberInput from "@/components/ui/NumberInput";
export default function Page() {
return (
<NumberInput disabled className="max-w-80" />
)
}prefix
import NumberInput from "@/components/ui/NumberInput";
import { IconCurrencyDollar } from '@tabler/icons-react';
export default function Page() {
return (
<NumberInput className="max-w-80" prefix={<IconCurrencyDollar size={20} />} />
)
}