Input Number

<BaseInputNumber /> · An incremental number input.

vue

<template>
  <BaseInputNumber
    v-model="value"
    rounded="sm"
    placeholder="Quantity"
  />
</template>

<script setup lang="ts">
const value = ref(0)
</script>

Features

Handles model binding
Full keyboard navigation
Support button hold and wheel even
Customizable formatting
State based styling
Support numbering systems in different locale

Anatomy

This component is self closing and can be used to create a number input. You can customize the input's visual style by using the available props.

vue

<template>
  <BaseInputNumber />
</template>

API Reference

This component has props that you can use to modify its visual style and behavior.

Model	Type
`model-value`	`number \| null`

Prop	Type
`inputmode` default:`-`	`"numeric" \| "decimal"` The inputmode to use for the input, usually for mobile devices.
`placeholder` default:`-`	`string` The placeholder to display for the input.
`variant` default:`"default"`	`"default" \| "muted"` The contrast of the input.
`rounded` default:`"md"`	`"none" \| "md" \| "sm" \| "lg" \| "full"` The radius of the input.
`size` default:`"md"`	`"md" \| "sm" \| "lg" \| "xl"` The size of the input.
`classes` default:`{}`	`{ root?: string \| string[]; button?: string \| string[]; buttonWrapper?: string \| string[]; }` Optional classes to pass to the inner components.
`default-value` default:`-`	`number`
`min` default:`-`	`number` The smallest value allowed for the input.
`max` default:`-`	`number` The largest value allowed for the input.
`step` default:`-`	`number` The amount that the input value changes with each increment or decrement "tick".
`step-snapping` default:`-`	`boolean` When `false`, prevents the value from snapping to the nearest increment of the step value
`format-options` default:`-`	`NumberFormatOptions` Formatting options for the value displayed in the number field. This also affects what characters are allowed to be typed by the user.
`locale` default:`-`	`string` The locale to use for formatting dates
`disabled` default:`-`	`boolean` When `true`, prevents the user from interacting with the Number Field.
`disable-wheel-change` default:`-`	`boolean` When `true`, prevents the value from changing on wheel scroll.
`id` default:`-`	`string` Id of the element
`as-child` default:`-`	`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.
`as` default:`-`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`name` default:`-`	`string` The name of the field. Submitted with its owning form as part of a name/value pair.
`required` default:`-`	`boolean` When `true`, indicates that the user must set the value before the owning form can be submitted.

Customization

Your can override the component default CSS variables in your main.css file.

css

@theme {
  /* Default input variables */
  --color-input-default-border: var(--color-muted-300);
  --color-input-default-bg: var(--color-white);
  --color-input-default-text: var(--color-muted-600);
  --color-input-default-placeholder: var(--color-muted-300);
  --color-input-default-button-bg: var(--color-muted-100);
  --color-input-default-button-bg-active: var(--color-muted-200);
  --color-input-default-button-text: var(--color-muted-700);

  /* Muted input variables */
  --color-input-muted-border: var(--color-muted-300);
  --color-input-muted-bg: var(--color-muted-50);
  --color-input-muted-text: var(--color-muted-600);
  --color-input-muted-placeholder: var(--color-muted-300);
  --color-input-muted-button-bg: var(--color-muted-200);
  --color-input-muted-button-bg-active: var(--color-muted-300);
  --color-input-muted-button-text: var(--color-muted-700);
}

Examples

Size

Use the size prop to change the size of the input.

vue

<template>
  <BaseInputNumber
    v-model="value"
    size="md"
    placeholder="Size: md"
  />
</template>

<script setup lang="ts">
const value = ref(0)
</script>

Variants

Use the variant prop to change the visual style of the input.

vue

<template>
  <BaseInputNumber
    v-model="value"
    variant="default"
    placeholder="Quantity"
  />
  <BaseInputNumber
    v-model="value"
    variant="muted"
    placeholder="Quantity"
  />
</template>

<script setup lang="ts">
const value = ref(0)
</script>

Radius

Use the rounded prop to change the border radius of the input.

vue

<template>
  <BaseInputNumber
    v-model="value"
    rounded="full"
    placeholder="Quantity"
  />
</template>

<script setup lang="ts">
const value = ref(0)
</script>

Steps

Use the step prop to handle the incremental steps of the input.

vue

<template>
  <BaseInputNumber
    v-model="fields.first"
    rounded="md"
    placeholder="Temperature (°C)"
    :min="-20"
    :max="20"
    :step="0.05"
  />

  <BaseInputNumber
    v-model="fields.second"
    rounded="md"
    placeholder="Temperature (°F)"
    :min="0"
    :step="0.5"
  />

  <BaseInputNumber
    v-model="fields.third"
    rounded="md"
    placeholder="BTC"
    :min="0"
    :step="0.000001"
  />

  <BaseInputNumber
    v-model="fields.fourth"
    rounded="md"
    placeholder="Bytes"
    :min="0"
    :step="1024"
  />
</template>

const fields = reactive({
  first: 0.15,
  second: 1.5,
  third: 1.542312,
  fourth: 1024,
})

Disabled

Use the disabled prop to set the input in a disabled state.

vue

<template>
  <BaseInputNumber
    v-model="value"
    placeholder="Quantity"
    disabled
  />
</template>

<script setup lang="ts">
const value = ref(0)
</script>

Input File

Kbd

Edit this page on Github