1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
"use client";
import { useId } from "react";
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";
import {
NumberField,
NumberFieldDecrement,
NumberFieldGroup,
NumberFieldIncrement,
NumberFieldInput,
} from "@/components/ui/number-field";
export default function NumberFieldBasicPreview() {
const seatsId = useId();
return (
<div className="flex w-full max-w-compact flex-col gap-6">
<NumberField defaultValue={2} min={1} max={10}>
<NumberFieldGroup>
<NumberFieldDecrement />
<NumberFieldInput aria-label="Quantity" />
<NumberFieldIncrement />
</NumberFieldGroup>
</NumberField>
<Field>
<FieldLabel htmlFor={seatsId}>Seats</FieldLabel>
<NumberField id={seatsId} defaultValue={12} min={1} max={500}>
<NumberFieldGroup>
<NumberFieldDecrement />
<NumberFieldInput />
<NumberFieldIncrement />
</NumberFieldGroup>
</NumberField>
<FieldDescription>$12 per seat each month.</FieldDescription>
</Field>
</div>
);
}
