Input

<afp-input>

stable

This component uses the light DOM, so its markup and styles are part of the regular document flow.

Short summary of the component's intended use.

<afp-input hidelabel></afp-input>

<afp-input hidelabel></afp-input>

<AfpInput hidelabel></AfpInput>

<AfpInput hidelabel></AfpInput>

Examples #

Shape #

Use the shape attribute to change a input's shape.

<div class="afp-cluster afp-align-center">
  <afp-input shape="pill" label="Pill"></afp-input>
  <afp-input shape="rounded" label="Rounded"></afp-input>
  <afp-input shape="soft" label="Soft"></afp-input>
  <afp-input shape="square" label="Square"></afp-input>
</div>

<div class="afp-cluster afp-align-center">
  <afp-input [shape]="'pill'" [label]="'Pill'"></afp-input>
  <afp-input [shape]="'rounded'" [label]="'Rounded'"></afp-input>
  <afp-input [shape]="'soft'" [label]="'Soft'"></afp-input>
  <afp-input [shape]="'square'" [label]="'Square'"></afp-input>
</div>

<div class="afp-cluster afp-align-center">
  <AfpInput shape="pill" label="Pill"></AfpInput>
  <AfpInput shape="rounded" label="Rounded"></AfpInput>
  <AfpInput shape="soft" label="Soft"></AfpInput>
  <AfpInput shape="square" label="Square"></AfpInput>
</div>

<div class="afp-cluster afp-align-center">
  <AfpInput :shape="'pill'" :label="'Pill'"></AfpInput>
  <AfpInput :shape="'rounded'" :label="'Rounded'"></AfpInput>
  <AfpInput :shape="'soft'" :label="'Soft'"></AfpInput>
  <AfpInput :shape="'square'" :label="'Square'"></AfpInput>
</div>

Sizes #

Use the size attribute to change a input's size.

<div class="afp-cluster afp-align-center">
  <afp-input label="Small" placeholder="John Doe" size="small"></afp-input>
  <afp-input label="Medium" placeholder="John Doe" size="medium"></afp-input>
  <afp-input label="Large" placeholder="John Doe" size="large"></afp-input>
</div>

<div class="afp-cluster afp-align-center">
  <afp-input [label]="'Small'" [placeholder]="'John Doe'" [size]="'small'"></afp-input>
  <afp-input [label]="'Medium'" [placeholder]="'John Doe'" [size]="'medium'"></afp-input>
  <afp-input [label]="'Large'" [placeholder]="'John Doe'" [size]="'large'"></afp-input>
</div>

<div class="afp-cluster afp-align-center">
  <AfpInput label="Small" placeholder="John Doe" size="small"></AfpInput>
  <AfpInput label="Medium" placeholder="John Doe" size="medium"></AfpInput>
  <AfpInput label="Large" placeholder="John Doe" size="large"></AfpInput>
</div>

<div class="afp-cluster afp-align-center">
  <AfpInput :label="'Small'" :placeholder="'John Doe'" :size="'small'"></AfpInput>
  <AfpInput :label="'Medium'" :placeholder="'John Doe'" :size="'medium'"></AfpInput>
  <AfpInput :label="'Large'" :placeholder="'John Doe'" :size="'large'"></AfpInput>
</div>

Label #

Use the label attribute or slot to set the Input's label.

Slotted

<afp-input placeholder="John Doe">
  <span slot="label">Slotted</span>
</afp-input>

<afp-input [placeholder]="'John Doe'">
  <span slot="label">Slotted</span>
</afp-input>

<AfpInput placeholder="John Doe">
  <span slot="label">Slotted</span>
</AfpInput>

<AfpInput :placeholder="'John Doe'">
  <span slot="label">Slotted</span>
</AfpInput>

Use the tooltip attribute to show the label's text as a tooltip when hovering on the label.

<afp-input type="text" name="first_name" label="First name" tooltip="true"></afp-input>

<afp-input [type]="'text'" [name]="'first_name'" [label]="'First name'" [tooltip]=true></afp-input>

<AfpInput type="text" name="first_name" label="First name" tooltip="true"></AfpInput>

<AfpInput :type="'text'" :name="'first_name'" :label="'First name'" :tooltip=true></AfpInput>

Types #

Use the type attribute to set the Inputs's semantic type.

<div class="afp-stack">
  <afp-input label="Text" name="name" placeholder="John Doe"></afp-input>
  <afp-input label="Email" type="email" placeholder="example@adesso.de"></afp-input>
  <afp-input name="password" label="Password" type="password" value="password"></afp-input>
  <afp-input label="Keys" type="keys"></afp-input>
</div>

<div class="afp-stack">
  <afp-input [label]="'Text'" [name]="'name'" [placeholder]="'John Doe'"></afp-input>
  <afp-input [label]="'Email'" [type]="'email'" [placeholder]="'example@adesso.de'"></afp-input>
  <afp-input [name]="'password'" [label]="'Password'" [type]="'password'" [value]="'password'"></afp-input>
  <afp-input [label]="'Keys'" [type]="'keys'"></afp-input>
</div>

<div class="afp-stack">
  <AfpInput label="Text" name="name" placeholder="John Doe"></AfpInput>
  <AfpInput label="Email" type="email" placeholder="example@adesso.de"></AfpInput>
  <AfpInput name="password" label="Password" type="password" value="password"></AfpInput>
  <AfpInput label="Keys" type="keys"></AfpInput>
</div>

<div class="afp-stack">
  <AfpInput :label="'Text'" :name="'name'" :placeholder="'John Doe'"></AfpInput>
  <AfpInput :label="'Email'" :type="'email'" :placeholder="'example@adesso.de'"></AfpInput>
  <AfpInput :name="'password'" :label="'Password'" :type="'password'" :value="'password'"></AfpInput>
  <AfpInput :label="'Keys'" :type="'keys'"></AfpInput>
</div>

Password #

Use the passwordToggle (passwordtoggle) attribute in password Input to enable the password toggle feature.

<afp-input label="Password toggle" type="password" passwordtoggle="true" value="P@ssw0rd"></afp-input>

<afp-input [label]="'Password toggle'" [type]="'password'" [passwordtoggle]=true [value]="'P@ssw0rd'"></afp-input>

<AfpInput label="Password toggle" type="password" passwordtoggle="true" value="P@ssw0rd"></AfpInput>

<AfpInput :label="'Password toggle'" :type="'password'" :passwordtoggle=true :value="'P@ssw0rd'"></AfpInput>

You can provide custom icons for the password password-toggle-show and the password-toggle-hide slots.

<afp-input label="Password toggle" type="password" passwordtoggle="true" value="P@ssw0rd">
  <afp-icon name="Eyeglasses" slot="password-toggle-show"></afp-icon>
  <afp-icon name="dash" slot="password-toggle-hide"></afp-icon>
</afp-input>

<afp-input [label]="'Password toggle'" [type]="'password'" [passwordtoggle]=true [value]="'P@ssw0rd'">
  <afp-icon [name]="'Eyeglasses'" [slot]="'password-toggle-show'"></afp-icon>
  <afp-icon [name]="'dash'" [slot]="'password-toggle-hide'"></afp-icon>
</afp-input>

<AfpInput label="Password toggle" type="password" passwordtoggle="true" value="P@ssw0rd">
  <AfpIcon name="Eyeglasses" slot="password-toggle-show"></AfpIcon>
  <AfpIcon name="dash" slot="password-toggle-hide"></AfpIcon>
</AfpInput>

<AfpInput :label="'Password toggle'" :type="'password'" :passwordtoggle=true :value="'P@ssw0rd'">
  <AfpIcon :name="'Eyeglasses'" :slot="'password-toggle-show'"></AfpIcon>
  <AfpIcon :name="'dash'" :slot="'password-toggle-hide'"></AfpIcon>
</AfpInput>

Number #

Use the min and max attribute in number Input to set the Quantity for example (between 10 and 20) .

<afp-input label="Quantity(between 10 and 20)" type="number" min=10  max=20></afp-input>

<afp-input [label]="'Quantity(between 10 and 20)'" [type]="'number'" min=10  max=20></afp-input>

<AfpInput label="Quantity(between 10 and 20)" type="number" min=10  max=20></AfpInput>

<AfpInput :label="'Quantity(between 10 and 20)'" :type="'number'" min=10  max=20></AfpInput>

Date #

Use the min and max attribute in the date Input to set the date of Birth for example (between 01.01.2000 and 20.01.2020).

<afp-input label="Date of Birth(between 01.01.2000 and 20.01.2020)" type="date" min="2000-01-01"  max="2020-01-20"></afp-input>

<afp-input [label]="'Date of Birth(between 01.01.2000 and 20.01.2020)'" [type]="'date'" [min]="'2000-01-01'"  [max]="'2020-01-20'"></afp-input>

<AfpInput label="Date of Birth(between 01.01.2000 and 20.01.2020)" type="date" min="2000-01-01"  max="2020-01-20"></AfpInput>

<AfpInput :label="'Date of Birth(between 01.01.2000 and 20.01.2020)'" :type="'date'" :min="'2000-01-01'"  :max="'2020-01-20'"></AfpInput>

Decimal #

In the decimal input expect the value attribute to be viewed with respect to the decimal attribute.

<div class="afp-stack">
  <afp-input label="Decimal input" type="decimal" value="1000"></afp-input>
  <afp-input label="Decimal input" type="decimal" value="1234.56"></afp-input>
</div>

<div class="afp-stack">
  <afp-input [label]="'Decimal input'" [type]="'decimal'" [value]=1000></afp-input>
  <afp-input [label]="'Decimal input'" [type]="'decimal'" [value]=1234.56></afp-input>
</div>

<div class="afp-stack">
  <AfpInput label="Decimal input" type="decimal" value="1000"></AfpInput>
  <AfpInput label="Decimal input" type="decimal" value="1234.56"></AfpInput>
</div>

<div class="afp-stack">
  <AfpInput :label="'Decimal input'" :type="'decimal'" :value=1000></AfpInput>
  <AfpInput :label="'Decimal input'" :type="'decimal'" :value=1234.56></AfpInput>
</div>

Use the decimalConfig (decimalconfig) property to change how the value gets displayed.

<afp-input label="Decimal input" type="decimal" value="100,999" decimalconfig='{"options":{"places":3,"sign":",","delimiter":"."},"decimalInOut":true,"focusAutoFill":false}'></afp-input>

<afp-input [label]="'Decimal input'" [type]="'decimal'" [value]="'100,999'" decimalconfig='{"options":{"places":3,"sign":",","delimiter":"."},"decimalInOut":true,"focusAutoFill":false}'></afp-input>

<AfpInput label="Decimal input" type="decimal" value="100,999" decimalconfig='{"options":{"places":3,"sign":",","delimiter":"."},"decimalInOut":true,"focusAutoFill":false}'></AfpInput>

<AfpInput :label="'Decimal input'" :type="'decimal'" :value="'100,999'" decimalconfig='{"options":{"places":3,"sign":",","delimiter":"."},"decimalInOut":true,"focusAutoFill":false}'></AfpInput>

Keys #

Use the allowedKeys (allowedkeys) attribute on the keys input to to restrict which keys are accepted. For example, allowedKeys=[1,2,3] allows only 1, 2, and 3; any other key presses are ignored. Additionally, if the value already contains disallowed characters, they will be removed from the value.

<afp-input label="Keys" type="keys" value="example123" allowedkeys='["1","2","3"]'></afp-input>

<afp-input [label]="'Keys'" [type]="'keys'" [value]="'example123'" allowedkeys='["1","2","3"]'></afp-input>

<AfpInput label="Keys" type="keys" value="example123" allowedkeys='["1","2","3"]'></AfpInput>

<AfpInput :label="'Keys'" :type="'keys'" :value="'example123'" allowedkeys='["1","2","3"]'></AfpInput>

Prefix and Suffix #

Use the input-prefix slot to add prefix to the Input field.

+49

<afp-input label="Number" type="number">
  <span slot="input-prefix">+49</span>
</afp-input>

<afp-input [label]="'Number'" [type]="'number'">
  <span slot="input-prefix">+49</span>
</afp-input>

<AfpInput label="Number" type="number">
  <span slot="input-prefix">+49</span>
</AfpInput>

<AfpInput :label="'Number'" :type="'number'">
  <span slot="input-prefix">+49</span>
</AfpInput>

Use the input-suffix slot to add suffix to the Input field.

<afp-input label="Cost" type="decimal"> 
  <span slot="input-suffix">$</span>
</afp-input>

<afp-input [label]="'Cost'" [type]="'decimal'"> 
  <span slot="input-suffix">$</span>
</afp-input>

<AfpInput label="Cost" type="decimal"> 
  <span slot="input-suffix">$</span>
</AfpInput>

<AfpInput :label="'Cost'" :type="'decimal'"> 
  <span slot="input-suffix">$</span>
</AfpInput>

Hint #

Use the hint attribute to provide additional information below the input field.

<afp-input type="text" label="Hint" hint="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua"></afp-input>

<afp-input [type]="'text'" [label]="'Hint'" [hint]="'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua'"></afp-input>

<AfpInput type="text" label="Hint" hint="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua"></AfpInput>

<AfpInput :type="'text'" :label="'Hint'" :hint="'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua'"></AfpInput>

Pattern #

Use the pattern attribute to validate the input against a regular expression.

<form id="test-form">
  <div class="afp-stack">
    <afp-input id="country-code" type="text" name="country_code" pattern="^[A-Za-z]{3}$" label="Three letter country code" placeholder="DEU" required></afp-input>
    <afp-button id="validate-btn" type="button">Validate</afp-button>
  </div>
</form>

<script>
  const btn = document.getElementById('validate-btn');
  const input = document.getElementById('country-code');

  btn?.addEventListener('click', () => {
    const nativeInput = input?.shadowRoot?.querySelector('input');
    if (nativeInput) {
      const ok = nativeInput.reportValidity();
      console.log('native valid?', ok, nativeInput.validationMessage);
    }
  });
</script>

<form id="test-form">
  <div class="afp-stack">
    <afp-input [id]="'country-code'" [type]="'text'" [name]="'country_code'" [pattern]="'^[A-Za-z]{3}>" [label]="'Three letter country code'" [placeholder]="'DEU'" required></afp-input>
    <afp-button [id]="'validate-btn'" [type]="'button'">Validate</afp-button>
  </div>
</form>

<script>
  const btn = document.getElementById('validate-btn');
  const input = document.getElementById('country-code');

  btn?.addEventListener('click', () => {
    const nativeInput = input?.shadowRoot?.querySelector('input');
    if (nativeInput) {
      const ok = nativeInput.reportValidity();
      console.log('native valid?', ok, nativeInput.validationMessage);
    }
  });
</script>

<form id="test-form">
  <div class="afp-stack">
    <AfpInput id="country-code" type="text" name="country_code" pattern="^[A-Za-z]{3}$" label="Three letter country code" placeholder="DEU" required></AfpInput>
    <AfpButton id="validate-btn" type="button">Validate</AfpButton>
  </div>
</form>

<script>
  const btn = document.getElementById('validate-btn');
  const input = document.getElementById('country-code');

  btn?.addEventListener('click', () => {
    const nativeInput = input?.shadowRoot?.querySelector('input');
    if (nativeInput) {
      const ok = nativeInput.reportValidity();
      console.log('native valid?', ok, nativeInput.validationMessage);
    }
  });
</script>

<form id="test-form">
  <div class="afp-stack">
    <AfpInput :id="'country-code'" :type="'text'" :name="'country_code'" :pattern="'^[A-Za-z]{3}$'" :label="'Three letter country code'" :placeholder="'DEU'" required></AfpInput>
    <AfpButton :id="'validate-btn'" :type="'button'">Validate</AfpButton>
  </div>
</form>

<script>
  const btn = document.getElementById('validate-btn');
  const input = document.getElementById('country-code');

  btn?.addEventListener('click', () => {
    const nativeInput = input?.shadowRoot?.querySelector('input');
    if (nativeInput) {
      const ok = nativeInput.reportValidity();
      console.log('native valid?', ok, nativeInput.validationMessage);
    }
  });
</script>

Enforce Pattern #

Use the enforcePattern (enforcepattern) attribute along with pattern to prevent users from entering characters that don't match the pattern. This provides real-time input restriction rather than just validation.

Letters Only #

Only alphabetic characters (A-Z, a-z) are allowed.

<afp-input label="Letters only" pattern="^[A-Za-z]*$" enforcepattern placeholder="Type letters only"></afp-input>

<afp-input [label]="'Letters only'" [pattern]="'^[A-Za-z]*>" enforcepattern [placeholder]="'Type letters only'"></afp-input>

<AfpInput label="Letters only" pattern="^[A-Za-z]*$" enforcepattern placeholder="Type letters only"></AfpInput>

<AfpInput :label="'Letters only'" :pattern="'^[A-Za-z]*$'" enforcepattern :placeholder="'Type letters only'"></AfpInput>

Numbers Only #

Only numeric characters (0-9) are allowed.

<afp-input label="Numbers only" pattern="^[0-9]*$" enforcepattern placeholder="Type numbers only"></afp-input>

<afp-input [label]="'Numbers only'" [pattern]="'^[0-9]*>" enforcepattern [placeholder]="'Type numbers only'"></afp-input>

<AfpInput label="Numbers only" pattern="^[0-9]*$" enforcepattern placeholder="Type numbers only"></AfpInput>

<AfpInput :label="'Numbers only'" :pattern="'^[0-9]*$'" enforcepattern :placeholder="'Type numbers only'"></AfpInput>

Clearable #

Use the clearable attribute to display a clear button when the input has a value.

<afp-input type="text" label="Clearable Input" value="This can be cleared" clearable></afp-input>

<afp-input [type]="'text'" [label]="'Clearable Input'" [value]="'This can be cleared'" clearable></afp-input>

<AfpInput type="text" label="Clearable Input" value="This can be cleared" clearable></AfpInput>

<AfpInput :type="'text'" :label="'Clearable Input'" :value="'This can be cleared'" clearable></AfpInput>

Clearable with Custom Icon #

Use the clear-icon slot to customize the clear button icon.

<afp-input type="password" label="Custom Clear Icon" value="Custom clear icon" passwordtoggle="true" clearable >
  <afp-icon slot="clear-icon" name="trash"></afp-icon>
</afp-input>

<afp-input [type]="'password'" [label]="'Custom Clear Icon'" [value]="'Custom clear icon'" [passwordtoggle]=true clearable >
  <afp-icon [slot]="'clear-icon'" [name]="'trash'"></afp-icon>
</afp-input>

<AfpInput type="password" label="Custom Clear Icon" value="Custom clear icon" passwordtoggle="true" clearable >
  <AfpIcon slot="clear-icon" name="trash"></AfpIcon>
</AfpInput>

<AfpInput :type="'password'" :label="'Custom Clear Icon'" :value="'Custom clear icon'" :passwordtoggle=true clearable >
  <AfpIcon :slot="'clear-icon'" :name="'trash'"></AfpIcon>
</AfpInput>

Disabled #

Use the disabled attribute specifies whether the input is disabled.

<afp-input type="text" name="email" label="Email" value="example@adesso.de" required="true" disabled="true"></afp-input>

<afp-input [type]="'text'" [name]="'email'" [label]="'Email'" [value]="'example@adesso.de'" [required]=true [disabled]=true></afp-input>

<AfpInput type="text" name="email" label="Email" value="example@adesso.de" required="true" disabled="true"></AfpInput>

<AfpInput :type="'text'" :name="'email'" :label="'Email'" :value="'example@adesso.de'" :required=true :disabled=true></AfpInput>

Invalid #

Use the invalid attribute specifies the error message.

<afp-input type="text" name="country_code" pattern="^[A-Za-z]{3}$" label="Three letter country code" required="true" invalid="Please enter three letters only."></afp-input>

<afp-input [type]="'text'" [name]="'country_code'" [pattern]="'^[A-Za-z]{3}>" [label]="'Three letter country code'" [required]=true [invalid]="'Please enter three letters only.'"></afp-input>

<AfpInput type="text" name="country_code" pattern="^[A-Za-z]{3}$" label="Three letter country code" required="true" invalid="Please enter three letters only."></AfpInput>

<AfpInput :type="'text'" :name="'country_code'" :pattern="'^[A-Za-z]{3}$'" :label="'Three letter country code'" :required=true :invalid="'Please enter three letters only.'"></AfpInput>

Properties

Learn more about properties.

Name Description Reflects

type

type of input field

Type

AfpInputType

Name	Description
`TEXT`	Free-form text input (default). Example: names, titles, general text.
`NUMBER`	Integer number input. Typically enforces digits-only (no decimals). Example: IDs, quantities.
`KEYS`	Key-capture mode for shortcuts or key sequences. Example: recording keyboard shortcuts (Ctrl+S, etc.).
`EMAIL`	Email address input with basic email validation. Example: user@example.com
`PASSWORD`	Password input that masks characters.
`DECIMAL`	Decimal number input supporting fractional values (e.g., 12.34). Example: prices, weights.
`DATE`	Date input. Often rendered with a date picker in supporting browsers. Example: 2025-11-04 (YYYY-MM-DD).

AfpInputType

Default AfpInputType.TEXT

size

size of the input.

Type

AfpSize

Name	Description
`SMALL`	Small size with compact dimensions.
`MEDIUM`	Medium size with standard dimensions.
`LARGE`	Large size with expanded dimensions.

AfpSize

Default AfpSize.MEDIUM

shape

shape of the tag

Type

AfpShape

Name	Description
`PILL`	Makes the component circular.
`ROUNDED`	Makes the component rounded.
`SOFT`	Makes the component have soft edges.
`SQUARE`	Makes the component square.

AfpShape

Default AfpShape.ROUNDED

min

The input’s minimum value. Only applies to date and number input types.

Type number

max

The input’s maximum value. Only applies to date and number input types.

Type number

disabled

disabled property of input

Type boolean

passwordToggle
passwordtoggle

passwordToggle property of input

Type boolean

required

enables required flag of input

Type boolean

name

html name attribute of input

Type string

tooltip

show label tooltip by hover

Type boolean

value

value of input field

Type string

ariaLabel
arialabel

Aria label for the input field. This is used for accessibility purposes to provide a text alternative for screen readers.

Type string

decimalConfig
decimalconfig

Decimal configuration for the input. Required type AfpInputType.DECIMAL

Type

AfpInputDecimal

Name	Description
`options`	type: `AfpInputDecimalOptions`
`decimalInOut`	type: `boolean`
`focusAutoFill`	type: `boolean`

AfpInputDecimal

Default { options: { places: 2, sign: ',', delimiter: '.' }, decimalInOut: true, focusAutoFill: false, }

allowedKeys
allowedkeys

Allowed keys configuration for the input. Required type afpInputType.KEYS

Type string[]

Default [ '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Backspace', 'ArrowLeft', 'ArrowRight', 'Delete', 'Tab', ]

label

label header property of input

Type string

placeholder

placeholder property of input

Type string

autocorrect

enables autocorrect on input

Type boolean

autocomplete

list of autocomplete strings

Type string

Default 'off'

pattern

A regular expression pattern to validate input against.

Type string

enforcePattern
enforcepattern

When true, enforces the pattern by preventing input that doesn't match. Characters that don't match the pattern will be blocked.

Type boolean

Default false

autofocus

enables autofocus on input

Type boolean

inputTabIndex
inputtabindex

html tabIndex property of button

Type number

invalid

validation footer property of input

Type string

hint

hint footer property of input

Type string

hideLabel
hidelabel

hides the label visually

Type boolean

clearable

Adds a clear button when the input has a value.

Type boolean

Default false

Events

Learn more about events.

Name	Return	Description
`afp-clear`	`void`	Emitted when the input is cleared.
`afp-focus`	`void`	Emitted when the input gains focus.
`afp-blur`	`void`	Emitted when the input loses focus.
`afp-select`	`string`	afp-select - Emitted when part of input gets selected.
`afp-value-changed`	`string`	Emitted when the input's value changes.

Slots

Learn more about slots.

Name	Description
`label`	Slot for adding custom label content
`input-prefix`	Slot for adding content before the input field
`input-suffix`	Slot for adding content after the input field
`password-toggle-show`	Slot for adding a custom show password icon
`password-toggle-hide`	Slot for adding a custom hide password icon
`clear-icon`	Slot for customizing the clear icon

Internationalization

Learn more about internationalization.

Key	Description
`input.password-toggle.show`	The show password icon in the password input with password toggle property enabled.
`input.password-toggle.hide`	The hide password icon in the password input with password toggle property enabled.
`input.clear-button.aria-label`	The aria-label of the input's clear button.

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The base container for the input	`::part(base)`
`label`	The container for the input's label	`::part(label)`
`label-base`	The base part of the label	`::part(label-base)`
`input-text`	The part for the text input element	`::part(input-text)`
`input-number`	The part for the number input element	`::part(input-number)`
`input-email`	The part for the email input element	`::part(input-email)`
`input-password`	The part for the password input element	`::part(input-password)`
`input-decimal`	The part for the decimal input element	`::part(input-decimal)`
`input-keys`	The part for the keys input element	`::part(input-keys)`
`input-date`	The part for the date input element	`::part(input-date)`
`field`	The part for the small size input field	`::part(field)`
`disabled`	The part for the disabled state of the input	`::part(disabled)`
`invalid-base`	The base container for the invalid message	`::part(invalid-base)`
`invalid`	The part for the invalid message	`::part(invalid)`
`hint-base`	The base container for the hint message	`::part(hint-base)`
`hint`	The part for the hint message	`::part(hint)`
`password-toggle-button`	The part for the password toggle icon wrapper	`::part(password-toggle-button)`
`password-toggle-icon`	The part for the password toggle icon	`::part(password-toggle-icon)`
`clear-icon`	The part for the clear icon	`::part(clear-icon)`
`clear-button`	The part for the clear button	`::part(clear-button)`
`input-actions`	The part for the input action icons container	`::part(input-actions)`

CSS Custom Properties

Name	Description	Default
`--afp-input-label-disabled-opacity`	The opacity of the input label when disabled.	`0.5`
`--afp-input-field-disabled-opacity`	The opacity of the input field when disabled.	`0.5`
`--afp-input-error-label-color`	The color of the label in the invalid/error state.	`--afp-color-error-500`
`--afp-input-error-border-color`	The border color of the input field in the invalid/error state.	`--afp-color-error-500`
`--afp-input-error-message-color`	The color of the error message in the invalid/error state.	`--afp-color-error-500`

Dependencies

The component automatically brings in the listed items, including any nested dependencies that may exist.

Component	CSS Part Prefix
afp-icon	`password-toggle-icon` - The part for the password toggle icon `clear-icon` - The part for the clear icon
afp-button	`password-toggle-button` - The part for the password toggle icon wrapper `clear-button` - The part for the clear button

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/input/input.js';