Porsche Design System

Input URL

Table of Contents

Props
Events
Slots
CSS Variables

Properties

type BreakpointCustomizable<T> = {
  base: T;
  xs?: T;
  s?: T;
  m?: T;
  l?: T;
  xl?: T;
  xxl?: T;
};

Property

Attribute

Description

Type

Default

autoComplete

auto-complete

Provides the browser with a URL autofill hint (e.g. autocomplete='url').

string

undefined

compact

Reduces the input height and padding for a more compact layout.

boolean

false

description

Sets a supplementary description displayed below the label to provide additional context.

string

''

disabled

Disables the field, preventing all input. The value is not submitted with the form.

boolean

false

form

Associates the field with a form element by its ID when the field is not nested directly inside it.

string

undefined

hideLabel 🛠

hide-label

Hides the visible label while keeping it accessible to screen readers. Supports responsive breakpoint values.

boolean
BreakpointCustomizable<boolean>

false

indicator

Shows a URL/link icon at the start of the field as a visual indicator.

boolean

false

label

Sets the visible label text displayed above the input field.

string

''

loading 🧪

loading

experimental Disables the field and displays a loading spinner to indicate an ongoing operation.

boolean

false

maxLength

max-length

Sets the maximum number of characters the user can enter.

number

undefined

message

Sets the validation feedback message displayed below the field when state is success or error.

string

''

minLength

min-length

Sets the minimum number of characters required for the field to be considered valid.

number

undefined

name

Sets the name submitted with the form data to identify this field's value on the server.

string

undefined

pattern

Sets a regular expression the entered value must match to be valid. Overrides the browser's default URL validation.

string

undefined

placeholder

Sets placeholder text shown inside the field when it is empty, such as an example URL.

string

''

readOnly

read-only

Makes the field read-only — the value is displayed but cannot be edited. The value is still submitted with the form.

boolean

false

required

Marks the field as required — form submission is blocked while this field is empty.

boolean

false

state

Sets the validation state, controlling the visual appearance and style of the feedback message (none, success, error).

type InputUrlState =
'none'
'error'
'success'

'none'

value

Sets the current URL value. Must be an absolute URL (e.g. https://porsche.com) to pass browser validation.

string
'null'

''

Events

Event

Description

Type

blur

Emitted when the input loses focus, regardless of whether the value changed.

type InputUrlBlurEventDetail = Event
CustomEvent<InputUrlBlurEventDetail>

change

Emitted when the input loses focus after its value was changed.

type InputUrlChangeEventDetail = Event
CustomEvent<InputUrlChangeEventDetail>

input

Emitted on every value change as the user types.

type InputUrlInputEventDetail = InputEvent
CustomEvent<InputUrlInputEventDetail>

Slots

Slot

Description

isRequired

altProp

allowedTagNames

<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 Variables

CSS Variable

Description

defaultValue

--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.