Input Email 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-completeProvides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='email').stringundefinedcompact compactA boolean value that, if present, renders the input field as a compact version.booleanfalsedescription descriptionSupplementary text providing more context or explanation for the input.string''disabled disabledA boolean value that, if present, makes the input field unusable and unclickable. The value will not be submitted with the form.booleanfalseform formSpecifies the id of the

element that the input belongs to (useful if the input is not a direct descendant of the form).stringundefinedhideLabel 🛠hide-labelControls the visibility of the label.boolean
BreakpointCustomizable<boolean>falseindicator indicatorControls the visibility of the email icon.booleanfalselabel labelText content for a user-facing label.string''loading 🧪loadingexperimental Shows a loading indicator.booleanfalsemaxLength max-lengthA non-negative integer specifying the maximum number of characters the user can enter into the input.numberundefinedmessage messageDynamic feedback text for validation or status.string''minLength min-lengthA non-negative integer specifying the minimum number of characters required for the input's value to be considered valid.numberundefinedmultiple multipleA boolean value that, if present, it allows the user to enter a list of multiple email addresses, separated by commas (and optional whitespace). The browser will validate each email address in the list.booleanfalsename nameThe name of the input field, used when submitting the form data.stringundefinedpattern patternSpecifies a regular expression that the input's value must match for the value to pass constraint validation. This allows for more specific email validation rules than the browser's default (e.g., restricting to a specific domain). If provided, it overrides the browser's default email validation.stringundefinedplaceholder placeholderA string that provides a brief hint to the user about what kind of information is expected in the field (e.g., placeholder='you@example.com'). This text is displayed when the input field is empty.string''readOnly read-onlyA boolean value that, if present, makes the input field uneditable by the user, but its value will still be submitted with the form.booleanfalserequired requiredA boolean value that, if present, indicates that the input field must be filled out before the form can be submitted.booleanfalsestate stateIndicates the validation or overall status of the input component.type InputEmailState =
'none'
'error'
'success''none'theme themeControls the visual appearance of the component.type Theme =
'light'
'dark'
'auto''light'value valueThe default email address (or comma-separated list of addresses) for the input.string''EventsEventDescriptionTypeblur Emitted when the email input has lost focus.type InputEmailBlurEventDetail = Event
CustomEvent<InputEmailBlurEventDetail>change Emitted when the email input loses focus after its value was changed.type InputEmailChangeEventDetail = Event
CustomEvent<InputEmailChangeEventDetail>input Emitted when the value has been changed as a direct result of a user action.type InputEmailInputEventDetail = InputEvent
CustomEvent<InputEmailInputEventDetail>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="label-after"> Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`).<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.--p-hyphens Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.auto