Input Number Table of Contents

• Props
• Events
• Slots
• CSS Variables

Propertiestype BreakpointCustomizable<T> = { base: T; xs?: T; s?: T; m?: T; l?: T; xl?: T; xxl?: T; };PropertyAttributeDescriptionTypeDefaultautoComplete auto-completeSpecifies whether the input can be autofilled by the browsertype InputNumberAutoComplete =
'off'
'on'
''''compact compactDisplays as compact version.booleanfalsecontrols controlsShow or hide the increment/decrement stepper controls.booleanfalsedescription descriptionThe description text.string''disabled disabledMarks the number input as disabled.booleanfalseform formThe id of a form element the number input should be associated with.stringundefinedhideLabel 🛠hide-labelShow or hide label and description text. For better accessibility it is recommended to show the label.boolean
BreakpointCustomizable<boolean>falselabel labelThe label text.string''max maxThe max value of the number input.numberundefinedmessage messageThe message styled depending on validation state.string''min minThe min value of the number input.numberundefinedname nameThe name of the number input.stringundefinedplaceholder placeholderThe placeholder text.string''readOnly read-onlySpecifies whether the number input should be read-only.booleanfalserequired requiredMarks the number input as required.booleanfalsestate stateThe validation state.type InputNumberState =
'none'
'error'
'success''none'step stepThe granularity that the value must adhere to.number1theme themeAdapts the color depending on the theme.type Theme =
'light'
'dark'
'auto''light'value valueThe number input value.string''EventsEventDescriptionTypeblur Emitted when the number input has lost focus.type InputNumberBlurEventDetail = Event
CustomEvent<InputNumberBlurEventDetail>change Emitted when the number input loses focus after its value was changed.type InputNumberChangeEventDetail = Event
CustomEvent<InputNumberChangeEventDetail>input Emitted when the value has been changed as a direct result of a user action.type InputNumberInputEventDetail = InputEvent
CustomEvent<InputNumberInputEventDetail>SlotsSlotDescriptionisRequiredaltPropallowedTagNames<slot name="label"> Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed.<slot name="description"> Shows a description. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed.<slot name="message"> Shows a state message. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed.<slot name="start"> Shows content at the start of the input (e.g. unit prefix).<slot name="end"> Shows content at the end of the input (e.g. toggle button, unit suffix).CSS VariablesCSS VariableDescriptiondefaultValue--ref-p-input-slotted-padding When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `padding` in oder to adjust the alignment correctly.--ref-p-input-slotted-margin When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly.