base-number-field-size

PreviousNext
Docs
reuicomponent

Preview

Loading preview…
registry/default/components/base-number-field/size.tsx
'use client';

import { NumberField, NumberFieldScrubArea } from '@/registry/default/ui/base-number-field';

export default function NumberFieldSize() {
  return (
    <div className="flex flex-col gap-6 justify-start items-start">
      <NumberField defaultValue={5} min={0} max={100} size="sm">
        <NumberFieldScrubArea>Small</NumberFieldScrubArea>
      </NumberField>

      <NumberField defaultValue={5} min={0} max={100}>
        <NumberFieldScrubArea>Medium</NumberFieldScrubArea>
      </NumberField>

      <NumberField defaultValue={5} min={0} max={100} size="lg">
        <NumberFieldScrubArea>Large</NumberFieldScrubArea>
      </NumberField>
    </div>
  );
}

Installation

npx shadcn@latest add @reui/base-number-field-size

Usage

import { BaseNumberFieldSize } from "@/components/base-number-field-size"
<BaseNumberFieldSize />