Input Number

A numeric input with native browser number validation. Native spinners are hidden by default. Supports min, max, and step constraints.

Default

Number input — native browser spinners are hidden by default.

<diwa-input-number label="Quantity" placeholder="0"></diwa-input-number>

With min / max constraints

Use min and max to constrain the allowed range.

<diwa-input-number label="Age" placeholder="18" min="18" max="99" description="Must be between 18 and 99."></diwa-input-number>

Decimal step

Set step to allow decimal input.

<diwa-input-number label="Price (€)" placeholder="0.00" step="0.01" description="Enter amount in euros."></diwa-input-number>

Error state

<diwa-input-number label="Quantity" value="-1" state="error" message="Quantity must be 0 or greater."></diwa-input-number>

Compact

<diwa-input-number label="Count" placeholder="0" compact></diwa-input-number>

Slots

Use start and end to embed currency symbols or unit labels inside the input border, and label-after to place contextual icons or links after the label.

€per unit

<diwa-input-number label="Price" placeholder="0">
  <span slot="start">€</span>
  <span slot="end">per unit</span>
  <diwa-icon slot="label-after" name="info" size="16"></diwa-icon>
</diwa-input-number>