number-field-custom-steppers

"use client"

import { useState } from "react"
import { MinusIcon, PlusIcon } from "lucide-react"
import { NumberField as AriaNumberField } from "react-aria-components"

import { Button } from "@/registry/new-york/ui/button"
import { ButtonGroup } from "@/registry/new-york/ui/button-group"
import {
  FieldDescription,
  FieldLabel,
  fieldVariants,
} from "@/registry/new-york/ui/field"

import { Input } from "../ui/input"

export default function NumberFieldCustomSteppers() {
  const [value, setValue] = useState(10)

  return (
    <div className="grid w-full max-w-md gap-4">
      <AriaNumberField
        value={value}
        onChange={setValue}
        minValue={0}
        maxValue={100}
        className={fieldVariants()}
      >
        <FieldLabel>Quantity</FieldLabel>
        <ButtonGroup>
          <Button slot="decrement" aria-label="Decrease" variant="outline">
            <MinusIcon className="h-4 w-4" />
          </Button>
          <Input />
          <Button slot="increment" aria-label="Increase" variant="outline">
            <PlusIcon className="h-4 w-4" />
          </Button>
        </ButtonGroup>
        <FieldDescription>
          Use the buttons to adjust the quantity
        </FieldDescription>
      </AriaNumberField>
    </div>
  )
}