ContextQMD
Back to Reui

Number Field

content/docs/components/base/number-field.mdx

2.0.01.3 KB
Original Source
<ComponentPreview styleName="base-nova" name="c-number-field-1" />

Installation

<CodeTabs> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">
bash
npx shadcn@latest add @reui/number-field
</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Install the following dependencies:</Step>

bash
npm install @base-ui/react

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource styleName="base-nova" name="number-field" title="components/reui/number-field.tsx" />

</Steps> </TabsContent> </CodeTabs>

Usage

tsx
import {
  NumberField,
  NumberFieldDecrement,
  NumberFieldGroup,
  NumberFieldIncrement,
  NumberFieldInput,
  NumberFieldScrubArea,
} from "@/components/ui/number-field"
tsx
<NumberField defaultValue={0}>
  <NumberFieldScrubArea label="Quantity" />
  <NumberFieldGroup>
    <NumberFieldDecrement />
    <NumberFieldInput />
    <NumberFieldIncrement />
  </NumberFieldGroup>
</NumberField>

Examples

Size

<ComponentPreview styleName="base-nova" name="c-number-field-2" />

With Action Buttons

<ComponentPreview styleName="base-nova" name="c-number-field-3" />

With Extended Message

<ComponentPreview styleName="base-nova" name="c-number-field-4" />