Input Number | UI Showcase

Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Basic usage

Default controls

Use standard decrement and increment buttons alongside a numeric input field.

Live preview

Component usage.wrn

<InputNumber
  size="md"
  name="default-quantity"
  value="1"
  min="0"
  max="99"
/>

Basic usage

Labeled input style

Add supporting label text and rounded controls for a more form-like number input.

Live preview

Select quantity

Component usage.wrn

<InputNumber
  size="md"
  variant="labeled"
  name="labeled-quantity"
  value="1"
  min="1"
  max="25"
  label="Select quantity"
/>

Layout

Vertical buttons

Stack the increment and decrement buttons vertically beside the field.

Live preview

Select quantity

Component usage.wrn

<InputNumber
  size="md"
  variant="vertical"
  name="vertical-quantity"
  value="1"
  min="0"
  max="20"
  label="Select quantity"
/>

Layout

Horizontal buttons

Place the increment and decrement buttons on opposite sides of the value.

Live preview

Component usage.wrn

<InputNumber
  size="md"
  variant="horizontal"
  name="horizontal-quantity"
  value="1"
  min="0"
  max="20"
/>

Sizing

Compact size

Use a smaller compact control when the available space is limited.

Live preview

Component usage.wrn

<InputNumber
  size="sm"
  variant="compact"
  name="compact-quantity"
  min="0"
  max="10"
/>

Commerce

Seat quantity selector

Pair the control with pricing information for seat counts or plan add-ons.

Live preview

Additional seats $39 monthly

Component usage.wrn

<InputNumber
  size="md"
  variant="seat"
  name="additional-seats"
  min="0"
  max="50"
  label="Additional seats"
  description="$39 monthly"
/>

States

Disabled input

Disable manual entry while keeping supported quantity controls available.

Live preview

Component usage.wrn

<InputNumber
  size="md"
  name="disabled-input"
  value="10"
  inputDisabled="true"
/>

States

Disabled buttons

Disable increment and decrement controls while leaving the current value visible.

Live preview

Component usage.wrn

<InputNumber
  size="md"
  name="disabled-buttons"
  value="10"
  buttonsDisabled="true"
/>

Behaviour

Custom step size

Set a custom step so every button press changes the value by two.

Live preview

Component usage.wrn

<InputNumber
  size="md"
  name="custom-step"
  min="0"
  max="20"
  step="2"
/>

Limits

Negative values

Use the min option to permit controlled negative values.

010

Live preview

Component usage.wrn

<InputNumber
  size="md"
  name="negative-values"
  value="-10"
  min="-100"
  max="100"
/>

Limits

Maximum limit

Set an upper limit and disable incrementing when that limit is reached.

011

Live preview

Component usage.wrn

<InputNumber
  size="md"
  name="maximum-limit"
  value="10"
  min="0"
  max="10"
/>

Validation

Validation states

Communicate whether the current numerical value is valid.

012

Live preview

Out of limit

Component usage.wrn

<InputNumber
  size="md"
  name="invalid-quantity"
  value="10"
  min="0"
  max="5"
  error="Out of limit"
/>

Component outputs

Receive every typed component output

Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.

@inputFires as the editable value changes.

@changeFires when the component's committed value or selection changes.

@incrementFires when the component emits the increment event.

@decrementFires when the component emits the decrement event.

Declarative handlers.wrn

<InputNumber
  @input='console.log(payload)'
  @change='console.log(payload)'
  @increment='console.log(payload)'
  @decrement='console.log(payload)'
/>

Direct output handlers.js

import { registerOutputHandler } from "@wrnexus/csr/outputs"

const component = document.querySelector("[data-ui-component=\"InputNumber\"], [data-component=\"InputNumber\"]")

if (component) registerOutputHandler(component, "input", (payload) => {
  console.log("input", payload)
})

if (component) registerOutputHandler(component, "change", (payload) => {
  console.log("change", payload)
})

if (component) registerOutputHandler(component, "increment", (payload) => {
  console.log("increment", payload)
})

if (component) registerOutputHandler(component, "decrement", (payload) => {
  console.log("decrement", payload)
})

Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

Prop	Type	Default	Required
`size`	string	`"default"`	No
`color`	string	`"primary"`	No
`variant`	string	`"default"`	No
`class`	string	`""`	No
`id`	string	`""`	No
`name`	string	`"quantity"`	No
`value`	number	`0`	No
`min`	string	`""`	No
`max`	string	`""`	No
`step`	number	`1`	No
`precision`	string	`"auto"`	No
`label`	string	`""`	No
`description`	string	`""`	No
`helpText`	string	`""`	No
`error`	string	`""`	No
`invalid`	boolean	`false`	No
`prefix`	string	`""`	No
`suffix`	string	`""`	No
`placeholder`	string	`""`	No
`autocomplete`	string	`"off"`	No
`inputMode`	string	`"decimal"`	No
`ariaLabel`	string	`""`	No
`required`	boolean	`false`	No
`disabled`	boolean	`false`	No
`inputDisabled`	boolean	`false`	No
`buttonsDisabled`	boolean	`false`	No
`readonly`	boolean	`false`	No
`allowInput`	boolean	`true`	No
`keyboard`	boolean	`true`	No
`wheel`	boolean	`false`	No
`clamp`	boolean	`true`	No
`fullWidth`	boolean	`false`	No
`showButtons`	boolean	`true`	No
`showValidationMessage`	boolean	`true`	No
`decrementLabel`	string	`"Decrease value"`	No
`incrementLabel`	string	`"Increase value"`	No
`controlsLabel`	string	`"Quantity controls"`	No
`requiredMessage`	string	`"A value is required."`	No
`minMessage`	string	`"Value is below the minimum."`	No
`maxMessage`	string	`"Value is above the maximum."`	No

Configure Input Number

Designed for real product surfaces

Receive every typed component output

Props and configuration