Diwa Design System

Input Number

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

Properties

NameTypeDefaultDescription
labelstring''Visible label text rendered above the input.
descriptionstring''Helper text shown below the input. Hidden when message is non-empty.
messagestring''State-coloured validation message shown below the input.
state'none' | 'error' | 'success''none'Validation state. Controls border colour and message colour.
namestring''HTML name attribute for form submission.
valuestring''Controlled value (mutable). Reflects to the inner input.
placeholderstring''Placeholder text.
disabledbooleanfalseDisables all interaction.
requiredbooleanfalseMarks field as required. Adds visual asterisk and aria-required="true".
readonlybooleanfalseAllows focus and selection but not editing.
hideLabelbooleanfalseVisually hides the label while keeping it as the accessible name.
compactbooleanfalseEnables dense mode. Reduces input height from 44 px (default touch target) to 32 px.
autoCompletestringundefinedHTML autocomplete attribute passed to the inner input.
theme'dark' | 'light''dark'Per-component theme override. Reflects onto host data-theme.
minnumberundefinedMinimum allowed value.
maxnumberundefinedMaximum allowed value.
stepnumberundefinedIncrement step for the value. Defaults to 1 when not set.

Events

NameDetail typeBubblesDescription
changestringYesEmitted when the user commits a value (on blur or Enter).
inputstringYesEmitted on every keystroke / value change.
blurFocusEventNoEmitted when the input loses focus.
focusFocusEventNoEmitted when the input gains focus.