---
title: TextField
description: TextField API.
---

import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
import Link from '@slint/common-files/src/components/Link.astro';

<CodeSnippetMD imagePath="/src/assets/generated/textfield.png" scale="3" imageWidth="200" imageHeight="200" imageAlt='TextField example'>

```slint playground
import { TextField, Vertical } from "@material";
export component Example inherits Window {
    width: 200px;
    height: 100px;

    Vertical {
        TextField {
            label: "Name";
            placeholder-text: "Enter your name";
        }
    }
}
```
</CodeSnippetMD>

A widget used to enter a single line of text with additional features like icons and supporting text.

## Properties

### enabled
<SlintProperty propName="enabled" typeName="bool" defaultValue="true">
When false, the text field is disabled and cannot be interacted with.
</SlintProperty>

### has-error
<SlintProperty propName="has-error" typeName="bool">
Indicates whether the text field should display an error state.
</SlintProperty>

### has-focus
<SlintProperty propName="has-focus" typeName="bool" propertyVisibility="out">
Set to true when the text field currently has the focus.
</SlintProperty>

### label
<SlintProperty propName="label" typeName="string">
The label text displayed above the text input.
</SlintProperty>

### leading-icon
<SlintProperty propName="leading-icon" typeName="image">
An icon displayed at the beginning of the text input.
</SlintProperty>

### placeholder-text
<SlintProperty propName="placeholder-text" typeName="string">
A placeholder text being shown when there is no text in the edit field.
</SlintProperty>

### supporting-text
<SlintProperty propName="supporting-text" typeName="string">
Additional text displayed below the text input, often used for hints or error messages.
</SlintProperty>

### text
<SlintProperty propName="text" typeName="string" propertyVisibility="in-out">
The text being edited.
</SlintProperty>

### trailing-icon
<SlintProperty propName="trailing-icon" typeName="image">
An icon displayed at the end of the text input.
</SlintProperty>

### input-type
<SlintProperty propName="input-type" typeName="enum" enumName="InputType" defaultValue="text">
 Use this to configure `TextInput` for editing special input, such as password fields.
</SlintProperty>

## Functions

### set-selection-offsets(int, int)
Selects the text between two UTF-8 offsets.

### select-all()
Selects all text in the text field.

### clear-selection()
Clears the current text selection.

### cut()
Copies the selected text to the clipboard and removes it from the text field.

### copy()
Copies the selected text to the clipboard.

### paste()
Pastes the text content of the clipboard at the cursor position.

## Callbacks

### accepted(string)
Invoked when the enter key is pressed.

### edited(string)
Emitted when the text has changed because the user modified it.

### key-pressed(KeyEvent) -> EventResult
Invoked when a key is pressed, the argument is a <Link type="KeyEvent" /> struct. Use this callback to handle keys before `TextField` does. Return `accept` to indicate that you've handled the event, or return `reject` to let `TextField` handle it.

### key-released(KeyEvent) -> EventResult
Invoked when a key is released, the argument is a <Link type="KeyEvent" /> struct. Use this callback to handle keys before `TextField` does. Return `accept` to indicate that you've handled the event, or return `reject` to let `TextField` handle it.

### leading-icon-clicked()
Invoked when the leading icon is clicked.

### trailing-icon-clicked()
Invoked when the trailing icon is clicked.
