Stepper

A stepper component like this lets users select the number they want in a few easy clicks. See Design Guidelines for Input Steppers from Nielsen Norman Group.
Source code
0
import { Stepper } from "rfui-package";

#Basic

0
<Stepper />

#Uncontrolled

Adding name="number-of-items" will lead to an <input type="hidden" name="number-of-items" being present with a value set to the value of the Stepper.
0
<Stepper name="number-of-items" />

#Controlled

Use the onChange function. It has a type of (newValue: number) => void.
0
<Stepper onChange={onChange} />

#Size

Set size to "sm", "md", or "lg". Defaults to "md".
0
0
0
<Stack className="gap-5">
  <Stepper size="sm" />
  <Stepper size="md" />
  <Stepper size="lg" />
</Stack>

#Rounded

Set rounded to "square", "sm", "lg", or "full". Defaults to the value of the CSS variable --default-roundedness. See "Default roundedness".
0
0
0
0
<Stack className="gap-5">
  <Stepper rounded="square" />
  <Stepper rounded="sm" />
  <Stepper rounded="lg" />
  <Stepper rounded="full" />
</Stack>

#Starting value

Set startingValue to the number you want the Stepper to begin at.
100
<Stepper startingValue={100} />

#Min and max

In this example the min is 0 and the max is 5.
0
<Stepper min={0} max={5} />

#Props

PropRequiredDefaultType and notes
name--
string
To be used for <input type="hidden" name={name} value={value} />. Without name, the <input type="hidden" /> won't be present.
size-"md"
"sm" | "md" | "lg"
rounded--
"square" | "sm" | "lg" | "full"
Defaults to the value of the CSS variable --default-roundedness. See "Default roundedness".
startingValue-0
number
onChange--
(newValue: number) => void
min--
number
max--
number
...rest--
Omit<ComponentProps<"div">, "size" | "min" | "max">
See the docs for rest parameters. For Stepper, you could pass anything you normally would pass to <div> because the return value looks something like this:
<div className={containerClass} {...restWithoutClass}>
  {children}
</div>