#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 class="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 class="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

name
Required
false
Type
string
Default
none
Notes
To be used for <input type="hidden" name={name} value={value} />. Without name, the <input type="hidden" /> won't be present.
size
Required
false
Type
"sm" | "md" | "lg"
Default
"md"
rounded
Required
false
Type
"square" | "sm" | "lg" | "full"
Default
none
Notes
Defaults to the value of the CSS variable --default-roundedness. See "Default roundedness".
startingValue
Required
false
Type
number
Default
0
onChange
Required
false
Type
(newValue: number) => void
Default
none
min
Required
false
Type
number
Default
none
max
Required
false
Type
number
Default
none
...rest
Required
false
Type
Omit<ComponentProps<"div">, "size" | "min" | "max">
Default
none
Notes
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 class={containerClass} {...restWithoutClass}>
  {children}
</div>