Porsche Design System

Input Number

The p-input-number component provides a versatile, user‑friendly interface for entering numeric values. It supports direct keyboard input and increment/decrement controls for precise adjustments. It has a start and end slot in order to support flexible slotted content.

A label is a caption which informs the user what information a particular form field is asking for. The p-input-number component can be used with or without a label, but it's recommended to keep the label visible for better accessibility whenever possible. When used without a label, it's mandatory to provide a descriptive label text for screen readers.

While a placeholder is optional but recommended to be set whenever bits of example content or hints shall be shown to give the user visual cues to fill out the form.

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-base">

<p-input-number label="Some label" name="Some name" controls="true"></p-input-number>
<script>

</script>
</body>
</html>