NumberField

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download number-field -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { NumberField } from "@/components/ui/number-field";
import { NumberFieldContent } from "@/components/ui/number-field";
import { NumberFieldDecrement } from "@/components/ui/number-field";
import { NumberFieldInput } from "@/components/ui/number-field";
import { NumberFieldIncrement } from "@/components/ui/number-field";
import { reactive } from "vue";
import * as UI from "@/components/ui/number-field";

const Component = UI.NumberField;

const args = reactive(
  {
    "defaultValue": 12,
    "value": 12,
    "min": 0,
    "max": 100,
    "step": 1,
    "disabled": false,
  } satisfies Partial<
    InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
  > &
    Record<string, unknown>,
);
</script>

<template>
  <NumberField
    v-model="args.value"
    :min="args.min"
    :max="args.max"
    :step="args.step"
    :disabled="args.disabled"
    ><NumberFieldContent
      ><NumberFieldDecrement /><NumberFieldInput /><NumberFieldIncrement /></NumberFieldContent
  ></NumberField>
</template>

Subcomponents

• NumberField — root; owns the value, min/max/step and disabled state
• NumberFieldContent — positions the input against the steppers
• NumberFieldInput — the spinbutton; ArrowUp/Down step, PageUp/Down step by 10, Home/End jump to the bounds
• NumberFieldIncrement / NumberFieldDecrement — steppers; auto-disable at the bound and repeat on press-and-hold

Examples

Default

<script setup lang="ts">
import { NumberField } from "@/components/ui/number-field";
import { NumberFieldContent } from "@/components/ui/number-field";
import { NumberFieldDecrement } from "@/components/ui/number-field";
import { NumberFieldInput } from "@/components/ui/number-field";
import { NumberFieldIncrement } from "@/components/ui/number-field";
import * as UI from "@/components/ui/number-field";

const Component = UI.NumberField;

const args = {
  "defaultValue": 12,
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <NumberField :default-value="12" class="w-40">
    <NumberFieldContent>
      <NumberFieldDecrement />
      <NumberFieldInput />
      <NumberFieldIncrement />
    </NumberFieldContent>
  </NumberField>
</template>

Min Max Step

<script setup lang="ts">
import { NumberField } from "@/components/ui/number-field";
import { NumberFieldContent } from "@/components/ui/number-field";
import { NumberFieldDecrement } from "@/components/ui/number-field";
import { NumberFieldInput } from "@/components/ui/number-field";
import { NumberFieldIncrement } from "@/components/ui/number-field";
import * as UI from "@/components/ui/number-field";

const Component = UI.NumberField;

const args = {
  "defaultValue": 12,
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <NumberField :min="0" :max="10" :step="2" :default-value="4" class="w-40">
    <NumberFieldContent>
      <NumberFieldDecrement />
      <NumberFieldInput />
      <NumberFieldIncrement />
    </NumberFieldContent>
  </NumberField>
</template>

Disabled

<script setup lang="ts">
import { NumberField } from "@/components/ui/number-field";
import { NumberFieldContent } from "@/components/ui/number-field";
import { NumberFieldDecrement } from "@/components/ui/number-field";
import { NumberFieldInput } from "@/components/ui/number-field";
import { NumberFieldIncrement } from "@/components/ui/number-field";
import * as UI from "@/components/ui/number-field";

const Component = UI.NumberField;

const args = {
  "defaultValue": 12,
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <NumberField :default-value="12" disabled class="w-40">
    <NumberFieldContent>
      <NumberFieldDecrement />
      <NumberFieldInput />
      <NumberFieldIncrement />
    </NumberFieldContent>
  </NumberField>
</template>

Invalid

<script setup lang="ts">
import { NumberField } from "@/components/ui/number-field";
import { NumberFieldContent } from "@/components/ui/number-field";
import { NumberFieldDecrement } from "@/components/ui/number-field";
import { NumberFieldInput } from "@/components/ui/number-field";
import { NumberFieldIncrement } from "@/components/ui/number-field";
import * as UI from "@/components/ui/number-field";

const Component = UI.NumberField;

const args = {
  "defaultValue": 12,
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <NumberField :default-value="12"
    ><NumberFieldContent
      ><NumberFieldDecrement /><NumberFieldInput
        aria-invalid="true" /><NumberFieldIncrement /></NumberFieldContent
  ></NumberField>
</template>

Formatted

<script setup lang="ts">
import { NumberField } from "@/components/ui/number-field";
import { NumberFieldContent } from "@/components/ui/number-field";
import { NumberFieldDecrement } from "@/components/ui/number-field";
import { NumberFieldInput } from "@/components/ui/number-field";
import { NumberFieldIncrement } from "@/components/ui/number-field";
import * as UI from "@/components/ui/number-field";

const Component = UI.NumberField;

const args = {
  "defaultValue": 12,
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <NumberField
    :default-value="1234.5"
    :step="0.5"
    :format-options="{ style: 'currency', currency: 'EUR' }"
    class="w-48"
  >
    <NumberFieldContent>
      <NumberFieldDecrement />
      <NumberFieldInput />
      <NumberFieldIncrement />
    </NumberFieldContent>
  </NumberField>
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

NumberField

NumberFieldContent

NumberFieldDecrement

NumberFieldIncrement

NumberFieldInput

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.