# Text Field Component

Text fields, typically used in forms and dialogs, allow users to input text.

## Usage {#usage}

Import the component:

```js
import 'mdui/components/text-field.js';
```

Import the TypeScript type:

```ts
import type { TextField } from 'mdui/components/text-field.js';
```

Example:

```html
<mdui-text-field label="Text Field"></mdui-text-field>
```

## Examples {#examples}

### Variant {#example-variant}

The `variant` attribute modifies the shape of the text field.

```html
<mdui-text-field variant="filled" label="Text Field"></mdui-text-field>

<br/><br/>

<mdui-text-field variant="outlined" label="Text Field"></mdui-text-field>
```

### Helper Text {#example-helper-text}

Use the `label` attribute to display a label above the text field.

```html
<mdui-text-field label="Text Field"></mdui-text-field>
```

Use the `placeholder` attribute to display placeholder text when there is no value.

```html
<mdui-text-field label="Text Field" placeholder="Placeholder"></mdui-text-field>
```

Use the `helper` attribute or `helper` slot to display helper text at the bottom of the text field. To display the helper text only when the input is focused, use the `helper-on-focus` attribute.

```html
<mdui-text-field label="Text Field" helper="Supporting text"></mdui-text-field>

<mdui-text-field label="Text Field">
  <span slot="helper" style="color: blue">Supporting text</span>
</mdui-text-field>

<mdui-text-field label="Text Field" helper="Supporting text" helper-on-focus></mdui-text-field>
```

### Clearable {#example-clearable}

The `clearable` attribute displays a clear button on the right when the text field has a value.

```html
<mdui-text-field clearable label="Text Field" value="Input Text"></mdui-text-field>
```

### End-Aligned Text {#example-end-aligned}

The `end-aligned` attribute aligns the text to the right.

```html
<mdui-text-field end-aligned label="Text Field" value="Input Text"></mdui-text-field>
```

### Prefix, Suffix, Icons {#example-prefix-suffix}

The `icon` and `end-icon` attributes or slots add Material Icons to the left and right of the text field, respectively.

```html
<mdui-text-field icon="search" end-icon="mic" label="Text Field"></mdui-text-field>

<br/><br/>

<mdui-text-field label="Text Field">
  <mdui-button-icon slot="icon" icon="search"></mdui-button-icon>
  <mdui-button-icon slot="end-icon" icon="mic"></mdui-button-icon>
</mdui-text-field>
```

The `prefix` and `suffix` attributes or slots add text to the left and right of the text field. They are displayed only when the text field is focused or has a value.

```html
<mdui-text-field prefix="$" suffix="/100" label="Text Field"></mdui-text-field>

<br/><br/>

<mdui-text-field label="Text Field">
  <span slot="prefix" style="color: blue">$</span>
  <span slot="suffix" style="color: blue">/100</span>
</mdui-text-field>
```

### Readonly {#example-readonly}

The `readonly` attribute makes the text field read-only.

```html
<mdui-text-field readonly label="Text Field" value="Input Text"></mdui-text-field>
```

### Disabled {#example-disabled}

The `disabled` attribute disables the text field.

```html
<mdui-text-field disabled label="Text Field" value="Input Text"></mdui-text-field>
```

### Multi-line Text Field {#example-rows}

The `rows` attribute specifies the number of rows for a multi-line text field.

```html
<mdui-text-field rows="3" label="Text Field"></mdui-text-field>
```

To automatically adjust the height of the text field based on the length of the input, use the `autosize` attribute. The `min-rows` and `max-rows` attributes specify the minimum and maximum number of rows.

```html
<mdui-text-field autosize label="Text Field"></mdui-text-field>

<br/><br/>

<mdui-text-field autosize min-rows="2" max-rows="5" label="Text Field"></mdui-text-field>
```

### Character Counter {#example-counter}

The `maxlength` attribute sets the maximum number of characters for the text field. To display a character counter below the text field, use the `counter` attribute.

```html
<mdui-text-field maxlength="20" counter label="Text Field"></mdui-text-field>
```

### Password Field {#example-password}

For password fields (`type="password"`), the `toggle-password` attribute adds a button on the right to toggle the visibility of the password.

```html
<mdui-text-field type="password" toggle-password label="Text Field"></mdui-text-field>
```

## mdui-text-field API

### Properties

<table>
<thead>
  <tr>
    <th>Attribute</th>
    <th>Property</th>
    <th>Reflect</th>
    <th>Type</th>
    <th>Default</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>variant</td>
    <td>variant</td>
    <td>true</td>
    <td>&#39;filled&#39; | &#39;outlined&#39;</td>
    <td>'filled'</td>
    <td><p>Defines the text field variant. Default is <code>filled</code>. Possible values:</p>
<ul>
<li><code>filled</code>: Text field with a background color for stronger visual emphasis.</li>
<li><code>outlined</code>: Text field with a border for subtler visual emphasis.</li>
</ul>
</td>
  </tr>
  <tr>
    <td>type</td>
    <td>type</td>
    <td>true</td>
    <td>&#39;text&#39; | &#39;number&#39; | &#39;password&#39; | &#39;url&#39; | &#39;email&#39; | &#39;search&#39; | &#39;tel&#39; | &#39;hidden&#39; | &#39;date&#39; | &#39;datetime-local&#39; | &#39;month&#39; | &#39;time&#39; | &#39;week&#39;</td>
    <td>'text'</td>
    <td><p>Specifies the text field type. Default is <code>text</code>. Possible values:</p>
<ul>
<li><code>text</code>: Standard text field.</li>
<li><code>number</code>: Allows numeric input only. Virtual keyboards on mobile devices show a numeric layout.</li>
<li><code>password</code>: Hides the password as you type.</li>
<li><code>url</code>: Validates URL format. Virtual keyboards on mobile devices show a URL-specific layout.</li>
<li><code>email</code>: Validates email format. Virtual keyboards on mobile devices show an email-specific layout.</li>
<li><code>search</code>: Shows a search icon on the Enter key in virtual keyboards.</li>
<li><code>tel</code>: Displays a phone keypad on virtual keyboards.</li>
<li><code>hidden</code>: Hides the control, but its value is still submitted to the server.</li>
<li><code>date</code>: Opens a date picker or a numeric scroll wheel for year, month, and day in supported browsers.</li>
<li><code>datetime-local</code>: Activates a date and time picker in supported browsers, without a time zone.</li>
<li><code>month</code>: Allows entering a year and month without a time zone.</li>
<li><code>time</code>: Allows time input without a time zone.</li>
<li><code>week</code>: Allows entering a year and week without a time zone.</li>
</ul>
</td>
  </tr>
  <tr>
    <td>name</td>
    <td>name</td>
    <td>true</td>
    <td>string</td>
    <td>''</td>
    <td><p>The name of the text field, which is submitted with form data.</p>
</td>
  </tr>
  <tr>
    <td>value</td>
    <td>value</td>
    <td>false</td>
    <td>string</td>
    <td>''</td>
    <td><p>The value of the text field, which is submitted with form data.</p>
</td>
  </tr>
  <tr>
    <td>undefined</td>
    <td>defaultValue</td>
    <td>false</td>
    <td>string</td>
    <td>''</td>
    <td><p>The default value. The text field resets to this value on form reset. JavaScript only.</p>
</td>
  </tr>
  <tr>
    <td>label</td>
    <td>label</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Label text.</p>
</td>
  </tr>
  <tr>
    <td>placeholder</td>
    <td>placeholder</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Placeholder text.</p>
</td>
  </tr>
  <tr>
    <td>helper</td>
    <td>helper</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>The helper text displayed at the bottom of the text field. Alternatively, use <code>slot=&quot;helper&quot;</code>.</p>
</td>
  </tr>
  <tr>
    <td>helper-on-focus</td>
    <td>helperOnFocus</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Shows the helper text only when the text field is focused.</p>
</td>
  </tr>
  <tr>
    <td>clearable</td>
    <td>clearable</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Makes the text field clearable.</p>
</td>
  </tr>
  <tr>
    <td>clear-icon</td>
    <td>clearIcon</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Material Icons name shown on the right when the text field is clearable. Alternatively, use <code>slot=&quot;clear-icon&quot;</code>.</p>
</td>
  </tr>
  <tr>
    <td>end-aligned</td>
    <td>endAligned</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Aligns the text to the right.</p>
</td>
  </tr>
  <tr>
    <td>prefix</td>
    <td>prefix</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>The prefix text for the text field. It is only displayed when the text field is focused or has a value. Alternatively, use <code>slot=&quot;prefix&quot;</code>.</p>
</td>
  </tr>
  <tr>
    <td>suffix</td>
    <td>suffix</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>The suffix text for the text field. It is only displayed when the text field is focused or has a value. Alternatively, use <code>slot=&quot;suffix&quot;</code>.</p>
</td>
  </tr>
  <tr>
    <td>icon</td>
    <td>icon</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Material Icons name for the prefix icon of the text field. Alternatively, use <code>slot=&quot;icon&quot;</code>.</p>
</td>
  </tr>
  <tr>
    <td>end-icon</td>
    <td>endIcon</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Material Icons name for the suffix icon of the text field. Alternatively, use <code>slot=&quot;end-icon&quot;</code>.</p>
</td>
  </tr>
  <tr>
    <td>error-icon</td>
    <td>errorIcon</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Material Icons name displayed on the right side of the text field when form field validation fails. Alternatively, use <code>slot=&quot;error-icon&quot;</code>.</p>
</td>
  </tr>
  <tr>
    <td>form</td>
    <td>form</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Associates the text field with a <code>&lt;form&gt;</code> element. Set this to the <code>id</code> of a <code>&lt;form&gt;</code> in the same document. If omitted, the text field uses its parent <code>&lt;form&gt;</code>, if any.</p>
<p>This lets the text field work with any form in the document, not just the one it is nested in.</p>
</td>
  </tr>
  <tr>
    <td>readonly</td>
    <td>readonly</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Makes the text field read-only.</p>
</td>
  </tr>
  <tr>
    <td>disabled</td>
    <td>disabled</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Disables the text field.</p>
</td>
  </tr>
  <tr>
    <td>required</td>
    <td>required</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>The field must be filled out before the form is submitted.</p>
</td>
  </tr>
  <tr>
    <td>rows</td>
    <td>rows</td>
    <td>true</td>
    <td>number</td>
    <td></td>
    <td><p>The number of rows in the text field.</p>
</td>
  </tr>
  <tr>
    <td>autosize</td>
    <td>autosize</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Automatically adjusts the height of the text field based on its content.</p>
</td>
  </tr>
  <tr>
    <td>min-rows</td>
    <td>minRows</td>
    <td>true</td>
    <td>number</td>
    <td></td>
    <td><p>The minimum number of rows when <code>autosize</code> is enabled.</p>
</td>
  </tr>
  <tr>
    <td>max-rows</td>
    <td>maxRows</td>
    <td>true</td>
    <td>number</td>
    <td></td>
    <td><p>The maximum number of rows when <code>autosize</code> is enabled.</p>
</td>
  </tr>
  <tr>
    <td>minlength</td>
    <td>minlength</td>
    <td>true</td>
    <td>number</td>
    <td></td>
    <td><p>The minimum number of characters for input.</p>
</td>
  </tr>
  <tr>
    <td>maxlength</td>
    <td>maxlength</td>
    <td>true</td>
    <td>number</td>
    <td></td>
    <td><p>The maximum number of characters for input.</p>
</td>
  </tr>
  <tr>
    <td>counter</td>
    <td>counter</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Displays the character count when <code>maxlength</code> is specified.</p>
</td>
  </tr>
  <tr>
    <td>min</td>
    <td>min</td>
    <td>true</td>
    <td>number</td>
    <td></td>
    <td><p>The minimum value when <code>type</code> is <code>number</code>.</p>
</td>
  </tr>
  <tr>
    <td>max</td>
    <td>max</td>
    <td>true</td>
    <td>number</td>
    <td></td>
    <td><p>The maximum value when <code>type</code> is <code>number</code>.</p>
</td>
  </tr>
  <tr>
    <td>step</td>
    <td>step</td>
    <td>true</td>
    <td>number</td>
    <td></td>
    <td><p>The step interval for increment/decrement when <code>type</code> is <code>number</code>.</p>
</td>
  </tr>
  <tr>
    <td>pattern</td>
    <td>pattern</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>The regular expression for form validation.</p>
</td>
  </tr>
  <tr>
    <td>toggle-password</td>
    <td>togglePassword</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Adds a toggle button to show or hide the password when <code>type</code> is <code>password</code>.</p>
</td>
  </tr>
  <tr>
    <td>show-password-icon</td>
    <td>showPasswordIcon</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Material Icons name for the visible password toggle button. Alternatively, use <code>slot=&quot;show-password-icon&quot;</code>.</p>
</td>
  </tr>
  <tr>
    <td>hide-password-icon</td>
    <td>hidePasswordIcon</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Material Icons name for the hidden password toggle button. Alternatively, use <code>slot=&quot;hide-password-icon&quot;</code>.</p>
</td>
  </tr>
  <tr>
    <td>autocapitalize</td>
    <td>autocapitalize</td>
    <td>true</td>
    <td>&#39;none&#39; | &#39;sentences&#39; | &#39;words&#39; | &#39;characters&#39;</td>
    <td></td>
    <td><p>A non-standard iOS attribute for automatic capitalization. Possible values:</p>
<ul>
<li><code>none</code>: Disables automatic capitalization.</li>
<li><code>sentences</code>: Capitalizes the first letter of each sentence.</li>
<li><code>words</code>: Capitalizes the first letter of each word.</li>
<li><code>characters</code>: Capitalizes all letters.</li>
</ul>
</td>
  </tr>
  <tr>
    <td>autocorrect</td>
    <td>autocorrect</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>The <code>autocorrect</code> attribute of the <code>input</code> element.</p>
</td>
  </tr>
  <tr>
    <td>autocomplete</td>
    <td>autocomplete</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>The <code>autocomplete</code> attribute of the <code>input</code> element.</p>
</td>
  </tr>
  <tr>
    <td>enterkeyhint</td>
    <td>enterkeyhint</td>
    <td>true</td>
    <td>&#39;enter&#39; | &#39;done&#39; | &#39;go&#39; | &#39;next&#39; | &#39;previous&#39; | &#39;search&#39; | &#39;send&#39;</td>
    <td></td>
    <td><p>Customizes the Enter key text or icon on the virtual keyboard. The effect varies by device and language. Possible values:</p>
<ul>
<li><code>enter</code>: Inserts a new line, typically used in a multi-line text field.</li>
<li><code>done</code>: Indicates completion and closes the virtual keyboard.</li>
<li><code>go</code>: Navigates to the target of the entered text.</li>
<li><code>next</code>: Moves to the next text field.</li>
<li><code>previous</code>: Moves to the previous text field.</li>
<li><code>search</code>: Navigates to search results.</li>
<li><code>send</code>: Sends a text message.</li>
</ul>
</td>
  </tr>
  <tr>
    <td>spellcheck</td>
    <td>spellcheck</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Enables spell checking.</p>
</td>
  </tr>
  <tr>
    <td>inputmode</td>
    <td>inputmode</td>
    <td>true</td>
    <td>&#39;none&#39; | &#39;text&#39; | &#39;decimal&#39; | &#39;numeric&#39; | &#39;tel&#39; | &#39;search&#39; | &#39;email&#39; | &#39;url&#39;</td>
    <td></td>
    <td><p>Customizes the virtual keyboard. Possible values:</p>
<ul>
<li><code>none</code>: No virtual keyboard. Useful for custom input controls.</li>
<li><code>text</code>: Standard text input keyboard.</li>
<li><code>decimal</code>: Decimal input keyboard. This includes a period <code>.</code> or comma <code>,</code> and numbers.</li>
<li><code>numeric</code>: Numeric keyboard. This displays numbers 0–9.</li>
<li><code>tel</code>: Phone number keyboard. This includes numbers 0–9, asterisk <code>*</code>, and hash <code>#</code> keys.</li>
<li><code>search</code>: Search-optimized virtual keyboard. &#39;Search&#39; appears on the submit button.</li>
<li><code>email</code>: Email-optimized virtual keyboard. This typically includes <code>@</code> and <code>.</code>.</li>
<li><code>url</code>: URL-optimized virtual keyboard. This typically includes <code>.</code>, <code>/</code>, and <code>#</code>.</li>
</ul>
</td>
  </tr>
  <tr>
    <td>undefined</td>
    <td>validity</td>
    <td>false</td>
    <td>ValidityState</td>
    <td></td>
    <td><p>A <a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState" target="_blank" rel="noopener nofollow"><code>ValidityState</code></a> object that represents the element&#39;s validity states.</p>
</td>
  </tr>
  <tr>
    <td>undefined</td>
    <td>validationMessage</td>
    <td>false</td>
    <td>string</td>
    <td></td>
    <td><p>Validation message. Empty string when valid.</p>
</td>
  </tr>
  <tr>
    <td>undefined</td>
    <td>valueAsNumber</td>
    <td>false</td>
    <td>number</td>
    <td></td>
    <td><p>Gets or sets the value as a <code>number</code>. Returns <code>NaN</code> if the value cannot be converted.</p>
</td>
  </tr>
  <tr>
    <td>autofocus</td>
    <td>autofocus</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Whether the element is focused when the page loads.</p>
</td>
  </tr>
  <tr>
    <td>tabindex</td>
    <td>tabIndex</td>
    <td>false</td>
    <td>number</td>
    <td></td>
    <td><p>The element&#39;s tab order when navigating with the Tab key.</p>
</td>
  </tr>
</tbody>
</table>

### Methods

<table>
<thead>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>select(): void</td>
    <td><p>Selects the content of the text field.</p>
</td>
  </tr>
  <tr>
    <td>setSelectionRange(start: number, end: number, direction: 'forward' | 'backward' | 'none'): void</td>
    <td><p>Selects a specific range in the text field.</p>
</td>
  </tr>
  <tr>
    <td>setRangeText(replacement: string, start: number, end: number, selectMode: 'select' | 'start' | 'end' | 'preserve'): void</td>
    <td><p>Replaces a specific range in the text field with new text.</p>
</td>
  </tr>
  <tr>
    <td>checkValidity(): boolean</td>
    <td><p>Checks the validity of the form field. If it is invalid, it triggers an <code>invalid</code> event and returns <code>false</code>. If valid, it returns <code>true</code>.</p>
</td>
  </tr>
  <tr>
    <td>reportValidity(): boolean</td>
    <td><p>Checks the validity of the form field. If it is invalid, it triggers an <code>invalid</code> event, returns <code>false</code>, and displays a validation message. If valid, it returns <code>true</code>.</p>
</td>
  </tr>
  <tr>
    <td>setCustomValidity(message: string): void</td>
    <td><p>Sets a custom error message. If the message is non-empty, the field is considered invalid.</p>
</td>
  </tr>
  <tr>
    <td>click(): void</td>
    <td><p>Simulates a mouse click on the element.</p>
</td>
  </tr>
  <tr>
    <td>focus(options?: FocusOptions): void</td>
    <td><p>Sets focus on the element. An optional object parameter may include a <code>preventScroll</code> property. If <code>preventScroll</code> is set to <code>true</code>, the page will not scroll to bring the focused element into view.</p>
</td>
  </tr>
  <tr>
    <td>blur(): void</td>
    <td><p>Removes focus from the element.</p>
</td>
  </tr>
</tbody>
</table>

### Events

<table>
<thead>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>focus</td>
    <td><p>Emitted when the text field gains focus.</p>
</td>
  </tr>
  <tr>
    <td>blur</td>
    <td><p>Emitted when the text field loses focus.</p>
</td>
  </tr>
  <tr>
    <td>change</td>
    <td><p>Emitted when the value changes and the text field loses focus.</p>
</td>
  </tr>
  <tr>
    <td>input</td>
    <td><p>Emitted when the value changes.</p>
</td>
  </tr>
  <tr>
    <td>invalid</td>
    <td><p>Emitted when the form control&#39;s validity is checked and it does not meet the constraints.</p>
</td>
  </tr>
  <tr>
    <td>clear</td>
    <td><p>Emitted when the clear button is clicked. Can be prevented with <code>event.preventDefault()</code>.</p>
</td>
  </tr>
</tbody>
</table>

### Slots

<table>
<thead>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>icon</td>
    <td><p>Icon on the left side.</p>
</td>
  </tr>
  <tr>
    <td>end-icon</td>
    <td><p>Icon on the right side.</p>
</td>
  </tr>
  <tr>
    <td>error-icon</td>
    <td><p>Icon on the right side for validation failure.</p>
</td>
  </tr>
  <tr>
    <td>prefix</td>
    <td><p>Text on the left side.</p>
</td>
  </tr>
  <tr>
    <td>suffix</td>
    <td><p>Text on the right side.</p>
</td>
  </tr>
  <tr>
    <td>clear-button</td>
    <td><p>Clear button.</p>
</td>
  </tr>
  <tr>
    <td>clear-icon</td>
    <td><p>Icon in the clear button.</p>
</td>
  </tr>
  <tr>
    <td>toggle-password-button</td>
    <td><p>Button to toggle password visibility.</p>
</td>
  </tr>
  <tr>
    <td>show-password-icon</td>
    <td><p>Icon in the password visibility toggle button (show password state).</p>
</td>
  </tr>
  <tr>
    <td>hide-password-icon</td>
    <td><p>Icon in the password visibility toggle button (hide password state).</p>
</td>
  </tr>
  <tr>
    <td>helper</td>
    <td><p>Helper text shown below the field.</p>
</td>
  </tr>
</tbody>
</table>

### CSS Parts

<table>
<thead>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>container</td>
    <td><p>Container for the text field.</p>
</td>
  </tr>
  <tr>
    <td>icon</td>
    <td><p>Icon on the left side.</p>
</td>
  </tr>
  <tr>
    <td>end-icon</td>
    <td><p>Icon on the right side.</p>
</td>
  </tr>
  <tr>
    <td>error-icon</td>
    <td><p>Icon on the right side for validation failure.</p>
</td>
  </tr>
  <tr>
    <td>prefix</td>
    <td><p>Text on the left side.</p>
</td>
  </tr>
  <tr>
    <td>suffix</td>
    <td><p>Text on the right side.</p>
</td>
  </tr>
  <tr>
    <td>label</td>
    <td><p>Label text above the field.</p>
</td>
  </tr>
  <tr>
    <td>input</td>
    <td><p>Internal <code>&lt;input&gt;</code> or <code>&lt;textarea&gt;</code> element.</p>
</td>
  </tr>
  <tr>
    <td>clear-button</td>
    <td><p>Clear button.</p>
</td>
  </tr>
  <tr>
    <td>clear-icon</td>
    <td><p>Icon in the clear button.</p>
</td>
  </tr>
  <tr>
    <td>toggle-password-button</td>
    <td><p>Button to toggle password visibility.</p>
</td>
  </tr>
  <tr>
    <td>show-password-icon</td>
    <td><p>Icon in the password visibility toggle button (show password state).</p>
</td>
  </tr>
  <tr>
    <td>hide-password-icon</td>
    <td><p>Icon in the password visibility toggle button (hide password state).</p>
</td>
  </tr>
  <tr>
    <td>supporting</td>
    <td><p>Container for supporting text at the bottom of the field, including helper, error, and counter.</p>
</td>
  </tr>
  <tr>
    <td>helper</td>
    <td><p>Helper text shown below the field.</p>
</td>
  </tr>
  <tr>
    <td>error</td>
    <td><p>Text at the bottom for error.</p>
</td>
  </tr>
  <tr>
    <td>counter</td>
    <td><p>Character count in the bottom right corner.</p>
</td>
  </tr>
</tbody>
</table>