---
title: Text Field
date: '2025-07-02'
description:  A text field is a UI element where users can enter or edit text input.
---

<!-- AUTOGEN:START -->
:::preview[textfield]
@code
```kotlin
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.composables.uikit.components.TextField
import com.composables.uikit.components.Text

@Composable
fun TextFieldExample() {
    var text by remember { mutableStateOf("") }

    TextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Email") },
        modifier = Modifier.width(300.dp),
        placeholder = {
            Text("jones@examples.com")
        },
        error = true,
        singleLine = true,
        supportive = {
            Text("Email is taken")
        }
    )
}
```
@end
:::

## Installation

{{uikit:installation}}

## Usage

```kotlin
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.composables.uikit.components.TextField
import com.composables.uikit.components.Text

@Composable
fun TextFieldExample() {
    var text by remember { mutableStateOf("") }

    TextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Email") },
        modifier = Modifier.width(300.dp),
        placeholder = {
            Text("jones@examples.com")
        },
        error = true,
        singleLine = true,
        supportive = {
            Text("Email is taken")
        }
    )
}
```
<!-- AUTOGEN:END -->