---
metaTitle: Number component | AwesCode UI
meta:
  - name: description
    content: The <AwNumber /> component is used to render Number input - UI Vue component for AwesCode UI.
title: Number
---

# AwNumber

**Category:** Molecule | **Import:** Global

The `AwNumber` component is a numeric input field with increment/decrement buttons, min/max validation, and step control. It extends `AwInput` with specialized number handling.

## Overview

`AwNumber` provides a comprehensive number input solution with:
- Increment/decrement buttons (can be hidden)
- Min/max value constraints
- Step control for value changes
- Integer-only mode
- Automatic value clamping on blur
- Paste validation
- Keyboard input filtering

## Usage

### Basic Example

```markup
<AwNumber v-model="quantity" />
```

### With Min and Max

```markup
<AwNumber 
    v-model="age" 
    :min="0" 
    :max="120" 
    label="Age"
/>
```

### With Step

```markup
<AwNumber 
    v-model="price" 
    :step="0.1" 
    :min="0" 
    label="Price"
/>
```

### Integer Only

```markup
<AwNumber 
    v-model="count" 
    integer 
    :min="0" 
    label="Count"
/>
```

### Without Buttons

```markup
<AwNumber 
    v-model="value" 
    hide-buttons 
    label="Number"
/>
```

### Custom Postfix Slot

```markup
<AwNumber v-model="value" label="Custom">
    <template #postfix>
        <span class="px-4">units</span>
    </template>
</AwNumber>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| value | Current numeric value | `Number` / `String` | `false` | `0` |
| min | Minimum allowed value | `Number` / `String` | `false` | `-Infinity` |
| max | Maximum allowed value | `Number` / `String` | `false` | `Infinity` |
| step | Step amount for increment/decrement | `Number` / `String` | `false` | `1` |
| integer | Restrict input to integers only | `Boolean` | `false` | `false` |
| hideButtons | Hide increment/decrement buttons | `Boolean` | `false` | `false` |

All standard `AwInput` props are also supported via `$attrs` (e.g., `label`, `placeholder`, `error`, `disabled`, etc.).

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| element | Custom input element | `{ cssClass, value, errorTooltip, mergedListeners, mergedAttributes, errorText, errorId }` | Default input element |
| postfix | Custom postfix content (replaces buttons when provided) | - | Increment/decrement buttons |

### Events

| Name | Payload | Description |
|------|---------|-------------|
| input | `Number` | Emitted when value changes |

### Methods

| Name | Description |
|------|-------------|
| add | Increment the value by step amount |
| subtract | Decrement the value by step amount |

## Related Components

- `AwInput` - Base input component used internally
- `AwButton` - Button component used for increment/decrement controls

## Notes

- **Import Method:** Global - Component is globally registered
- Value is automatically clamped to min/max range on blur
- Paste events are validated against min/max constraints
- Keys `-`, `+`, and `e` are prevented to avoid invalid number formats
- When `integer` is true, only numeric keys are allowed
- Input type is set to `tel` for better mobile keyboard support
- Uses `inputmode="numeric"` for mobile numeric keyboard
- Buttons are automatically disabled when min/max limits are reached
- Value is converted to number internally (empty/null values become `null`)