---
title: Text Fields
description: Text input fields for standard, ghost, search, multiline, and read-only states.
---

Use text fields for editable text input, inline search, and compact form controls.

<UiDemo id="text-field" />

## Installation

<Tabs>
<Tab title="Gradle">
```kotlin title="app/build.gradle.kts"
implementation("com.composables:ui:0.1.0")
```
</Tab>
<Tab title="Copy & Paste">
#### Add the required dependencies

```kotlin title="app/build.gradle.kts"
implementation("com.composables:composeunstyled:2.7.0")
```

#### Copy and paste the following sources into your project

<ComponentSource file="components/TextField.kt" />
<ComponentSource file="components/Utils.kt" />
</Tab>
</Tabs>

## Examples

### Search

<UiDemo id="text-field-search" />

### Ghost

<UiDemo id="text-field-ghost" />

### Multiline

<UiDemo id="text-field-multiline" />

### Disabled

<UiDemo id="text-field-disabled" />

### Read-only

<UiDemo id="text-field-read-only" />

## API Reference

### TextField

A styled text input field.

```kotlin
@Composable
fun TextField(
    state: TextFieldState,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    readOnly: Boolean = false,
    accessibilityLabel: String? = null,
    placeholder: (@Composable () -> Unit)? = null,
    leading: (@Composable () -> Unit)? = null,
    trailing: (@Composable () -> Unit)? = null,
    style: TextFieldStyle = TextFieldStyle.Default,
    shape: Shape = Theme[shapes][fieldShape],
    backgroundColor: Color = textFieldBackgroundColorFor(style),
    contentColor: Color = Theme[colors][onFieldColor],
    placeholderColor: Color = Theme[colors][mutedColor],
    borderColor: Color = textFieldBorderColorFor(style),
    contentPadding: PaddingValues = PaddingValues(horizontal = 12.dp),
    cursorBrush: Brush = SolidColor(contentColor),
    selectionColors: TextSelectionColors = Theme[textSelectionColors][defaultTextSelectionColors],
    textStyle: TextStyle = LocalTextStyle.current.merge(TextFieldInputTextStyle),
    textAlign: TextAlign = TextAlign.Unspecified,
    lineHeight: TextUnit = TextUnit.Unspecified,
    fontSize: TextUnit = textStyle.fontSize,
    letterSpacing: TextUnit = textStyle.letterSpacing,
    fontWeight: FontWeight? = textStyle.fontWeight,
    fontFamily: FontFamily? = textStyle.fontFamily,
    textDecoration: TextDecoration? = textStyle.textDecoration,
    lineLimits: TextFieldLineLimits = TextFieldLineLimits.SingleLine,
    inputTransformation: InputTransformation? = null,
    outputTransformation: OutputTransformation? = null,
    onTextLayout: (Density.(getResult: () -> TextLayoutResult?) -> Unit)? = null,
    onKeyboardAction: KeyboardActionHandler? = null,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    scrollState: ScrollState = rememberScrollState(),
)
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `state` | `TextFieldState` | State object that holds and edits the text field value. |
| `modifier` | `Modifier` | Modifier applied to the text field. |
| `enabled` | `Boolean` | Whether the text field can be interacted with. |
| `readOnly` | `Boolean` | Whether the text field can receive focus without allowing text edits. |
| `accessibilityLabel` | `String?` | Accessible label announced for the text field. |
| `placeholder` | `(@Composable () -> Unit)?` | Content displayed when the text field is empty. |
| `leading` | `(@Composable () -> Unit)?` | Content displayed before the editable text. |
| `trailing` | `(@Composable () -> Unit)?` | Content displayed after the editable text. |
| `style` | `TextFieldStyle` | Visual style used by the text field. |
| `shape` | `Shape` | Shape used for the text field container and focus ring. |
| `backgroundColor` | `Color` | Background color used by the text field container. |
| `contentColor` | `Color` | Color used for input text and field content. |
| `placeholderColor` | `Color` | Color used for placeholder content. |
| `borderColor` | `Color` | Border color drawn around the text field when specified. |
| `contentPadding` | `PaddingValues` | Padding applied around the text field content. |
| `cursorBrush` | `Brush` | Brush used to draw the text cursor. |
| `selectionColors` | `TextSelectionColors` | Colors used for text selection handles and highlight. |
| `textStyle` | `TextStyle` | Text style used by the editable text. |
| `textAlign` | `TextAlign` | Text alignment used by the editable text. |
| `lineHeight` | `TextUnit` | Line height used by the editable text. |
| `fontSize` | `TextUnit` | Font size used by the editable text. |
| `letterSpacing` | `TextUnit` | Letter spacing used by the editable text. |
| `fontWeight` | `FontWeight?` | Font weight used by the editable text. |
| `fontFamily` | `FontFamily?` | Font family used by the editable text. |
| `textDecoration` | `TextDecoration?` | Text decoration used by the editable text. |
| `lineLimits` | `TextFieldLineLimits` | Single-line or multiline limits used by the text field. |
| `inputTransformation` | `InputTransformation?` | Transformation applied to input edits before they are committed. |
| `outputTransformation` | `OutputTransformation?` | Transformation applied to displayed text. |
| `onTextLayout` | `(Density.(getResult: () -> TextLayoutResult?) -> Unit)?` | Called with the latest text layout result. |
| `onKeyboardAction` | `KeyboardActionHandler?` | Called when the keyboard action is triggered. |
| `keyboardOptions` | `KeyboardOptions` | Keyboard configuration for the text field. |
| `interactionSource` | `MutableInteractionSource` | Interaction source used for focus state. |
| `scrollState` | `ScrollState` | Scroll state used by the editable text. |

### TextFieldStyle

Visual style variants for TextField.

```kotlin
@kotlin.jvm.JvmInline
value class TextFieldStyle internal constructor(@Suppress("unused") private val value: Int)
```

| Value | Description |
|-------|-------------|
| `Default` | Uses the default text field style. |
| `Filled` | Uses the filled text field container. |
| `Ghost` | Uses a transparent text field container. |