Porsche Design System

Input Email

The p-input-email component provides a user-friendly, accessible interface for entering valid email addresses. It leverages native HTML5 email validation and ensures appropriate keyboard behavior on mobile devices. It includes start and end slots to flexibly incorporate icons, buttons, or other elements within the input field.

A label is a caption which informs the user what information a particular form field is asking for. The p-input-email 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-email label="Some label" name="some-name" indicator="true"></p-input-email>
<script>

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