The vscode-text-field is a web component implementation of a text field element.
| Attribute | Type | Description |
|---|---|---|
autofocus |
boolean | Indicates that this component should get focus after the page finishes loading. |
disabled |
boolean | Prevents the user from interacting with the button––it cannot be pressed or focused. |
maxlength |
number | The maximum number of characters a user can enter. |
name |
string | The name of the component. |
placeholder |
string | Sets the placeholder value of the component, generally used to provide a hint to the user. |
readonly |
boolean | When true, the control will be immutable by any user interaction. |
size |
number | Sets the width of the element to a specified number of characters. |
value |
string | The value (i.e. content) of the text field. |
<vscode-text-field>Text Field Label</vscode-text-field><vscode-text-field autofocus>Text Field Label</vscode-text-field><vscode-text-field disabled>Text Field Label</vscode-text-field><vscode-text-field maxlength="10">Text Field Label</vscode-text-field><vscode-text-field name="example-vscode-text-field"
>Text Field Label</vscode-text-field
><vscode-text-field placeholder="Placeholder Text"
>Text Field Label</vscode-text-field
><vscode-text-field readonly>Text Field Label</vscode-text-field><vscode-text-field size="50">Text Field Label</vscode-text-field>An icon can be added to the left of the text field by adding an element with the attribute slot="start".
<!-- Note: Using Visual Studio Code Codicon Library -->
<vscode-text-field>
Text Field Label
<span slot="start" class="codicon codicon-git-merge"></span>
</vscode-text-field>An icon can be added to the right of the text field by adding an element with the attribute slot="end".
<!-- Note: Using Visual Studio Code Codicon Library -->
<vscode-text-field>
Text Field Label
<span slot="end" class="codicon codicon-chevron-right"></span>
</vscode-text-field>