blob: b7b882770ad6febdd1a783a902f16332a9e4a5ab [file] [log] [blame]
<html devsite="true">
<head>
<title>BasicTextFieldKt</title>
{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %}
{% include "_shared/_reference-head-tags.html" %}
</head>
<body>
<h1>BasicTextFieldKt</h1>
<p>
<pre>public final class <a href="/reference/androidx/compose/foundation/text/BasicTextFieldKt.html">BasicTextFieldKt</a></pre>
</p>
<hr>
<h2>Summary</h2>
<div class="devsite-table-wrapper">
<table class="responsive">
<colgroup>
<col width="40%">
<col>
</colgroup>
<thead>
<tr>
<th colspan="100%"><h3>Public methods</h3></th>
</tr>
</thead>
<tbody class="list">
<tr>
<td><code>static&nbsp;final void</code></td>
<td>
<div><code>@<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a><br><a href="/reference/androidx/compose/foundation/text/BasicTextFieldKt.html#BasicTextField(kotlin.String,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.text.TextStyle,androidx.compose.foundation.text.KeyboardOptions,androidx.compose.foundation.text.KeyboardActions,kotlin.Boolean,kotlin.Int,androidx.compose.ui.text.input.VisualTransformation,kotlin.Function1,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Brush,kotlin.Function1)">BasicTextField</a>(<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/String.html">String</a>&nbsp;value,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1&lt;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/String.html">String</a>,&nbsp;<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>&gt;&nbsp;onValueChange,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/Modifier.html">Modifier</a>&nbsp;modifier,<br>&nbsp;&nbsp;&nbsp;&nbsp;boolean&nbsp;enabled,<br>&nbsp;&nbsp;&nbsp;&nbsp;boolean&nbsp;readOnly,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/text/TextStyle.html">TextStyle</a>&nbsp;textStyle,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/text/KeyboardOptions.html">KeyboardOptions</a>&nbsp;keyboardOptions,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/text/KeyboardActions.html">KeyboardActions</a>&nbsp;keyboardActions,<br>&nbsp;&nbsp;&nbsp;&nbsp;boolean&nbsp;singleLine,<br>&nbsp;&nbsp;&nbsp;&nbsp;int&nbsp;maxLines,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/text/input/VisualTransformation.html">VisualTransformation</a>&nbsp;visualTransformation,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1&lt;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/text/TextLayoutResult.html">TextLayoutResult</a>,&nbsp;<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>&gt;&nbsp;onTextLayout,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/interaction/MutableInteractionSource.html">MutableInteractionSource</a>&nbsp;interactionSource,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/graphics/Brush.html">Brush</a>&nbsp;cursorBrush,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1&lt;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function0&lt;<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>&gt;,&nbsp;<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>&gt;&nbsp;decorationBox<br>)</code></div>
<p>Basic composable that enables users to edit text via hardware or software keyboard, but provides no decorations like hint or placeholder.</p>
</td>
</tr>
<tr>
<td><code>static&nbsp;final void</code></td>
<td>
<div><code>@<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a><br><a href="/reference/androidx/compose/foundation/text/BasicTextFieldKt.html#BasicTextField(androidx.compose.ui.text.input.TextFieldValue,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.text.TextStyle,androidx.compose.foundation.text.KeyboardOptions,androidx.compose.foundation.text.KeyboardActions,kotlin.Boolean,kotlin.Int,androidx.compose.ui.text.input.VisualTransformation,kotlin.Function1,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Brush,kotlin.Function1)">BasicTextField</a>(<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/text/input/TextFieldValue.html">TextFieldValue</a>&nbsp;value,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1&lt;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/text/input/TextFieldValue.html">TextFieldValue</a>,&nbsp;<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>&gt;&nbsp;onValueChange,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/Modifier.html">Modifier</a>&nbsp;modifier,<br>&nbsp;&nbsp;&nbsp;&nbsp;boolean&nbsp;enabled,<br>&nbsp;&nbsp;&nbsp;&nbsp;boolean&nbsp;readOnly,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/text/TextStyle.html">TextStyle</a>&nbsp;textStyle,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/text/KeyboardOptions.html">KeyboardOptions</a>&nbsp;keyboardOptions,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/text/KeyboardActions.html">KeyboardActions</a>&nbsp;keyboardActions,<br>&nbsp;&nbsp;&nbsp;&nbsp;boolean&nbsp;singleLine,<br>&nbsp;&nbsp;&nbsp;&nbsp;int&nbsp;maxLines,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/text/input/VisualTransformation.html">VisualTransformation</a>&nbsp;visualTransformation,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1&lt;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/text/TextLayoutResult.html">TextLayoutResult</a>,&nbsp;<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>&gt;&nbsp;onTextLayout,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/interaction/MutableInteractionSource.html">MutableInteractionSource</a>&nbsp;interactionSource,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/graphics/Brush.html">Brush</a>&nbsp;cursorBrush,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1&lt;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function0&lt;<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>&gt;,&nbsp;<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>&gt;&nbsp;decorationBox<br>)</code></div>
<p>Basic composable that enables users to edit text via hardware or software keyboard, but provides no decorations like hint or placeholder.</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="list">
<h2>Public methods</h2>
<div class="api-item"><a name="BasicTextField(kotlin.String, kotlin.Function1, androidx.compose.ui.Modifier, kotlin.Boolean, kotlin.Boolean, androidx.compose.ui.text.TextStyle, androidx.compose.foundation.text.KeyboardOptions, androidx.compose.foundation.text.KeyboardActions, kotlin.Boolean, kotlin.Int, androidx.compose.ui.text.input.VisualTransformation, kotlin.Function1, androidx.compose.foundation.interaction.MutableInteractionSource, androidx.compose.ui.graphics.Brush, kotlin.Function1)"></a><a name="BasicTextField-kotlin.String-kotlin.Function1-androidx.compose.ui.Modifier-kotlin.Boolean-kotlin.Boolean-androidx.compose.ui.text.TextStyle-androidx.compose.foundation.text.KeyboardOptions-androidx.compose.foundation.text.KeyboardActions-kotlin.Boolean-kotlin.Int-androidx.compose.ui.text.input.VisualTransformation-kotlin.Function1-androidx.compose.foundation.interaction.MutableInteractionSource-androidx.compose.ui.graphics.Brush-kotlin.Function1-"></a><a name="basictextfield"></a>
<h3 class="api-name" id="BasicTextField(kotlin.String,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.text.TextStyle,androidx.compose.foundation.text.KeyboardOptions,androidx.compose.foundation.text.KeyboardActions,kotlin.Boolean,kotlin.Int,androidx.compose.ui.text.input.VisualTransformation,kotlin.Function1,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Brush,kotlin.Function1)">BasicTextField</h3>
<pre class="api-signature no-pretty-print">@<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a><br>public&nbsp;static&nbsp;final&nbsp;void&nbsp;<a href="/reference/androidx/compose/foundation/text/BasicTextFieldKt.html#BasicTextField(kotlin.String,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.text.TextStyle,androidx.compose.foundation.text.KeyboardOptions,androidx.compose.foundation.text.KeyboardActions,kotlin.Boolean,kotlin.Int,androidx.compose.ui.text.input.VisualTransformation,kotlin.Function1,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Brush,kotlin.Function1)">BasicTextField</a>(<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/String.html">String</a>&nbsp;value,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1&lt;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/String.html">String</a>,&nbsp;<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>&gt;&nbsp;onValueChange,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/Modifier.html">Modifier</a>&nbsp;modifier,<br>&nbsp;&nbsp;&nbsp;&nbsp;boolean&nbsp;enabled,<br>&nbsp;&nbsp;&nbsp;&nbsp;boolean&nbsp;readOnly,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/text/TextStyle.html">TextStyle</a>&nbsp;textStyle,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/text/KeyboardOptions.html">KeyboardOptions</a>&nbsp;keyboardOptions,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/text/KeyboardActions.html">KeyboardActions</a>&nbsp;keyboardActions,<br>&nbsp;&nbsp;&nbsp;&nbsp;boolean&nbsp;singleLine,<br>&nbsp;&nbsp;&nbsp;&nbsp;int&nbsp;maxLines,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/text/input/VisualTransformation.html">VisualTransformation</a>&nbsp;visualTransformation,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1&lt;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/text/TextLayoutResult.html">TextLayoutResult</a>,&nbsp;<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>&gt;&nbsp;onTextLayout,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/interaction/MutableInteractionSource.html">MutableInteractionSource</a>&nbsp;interactionSource,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/graphics/Brush.html">Brush</a>&nbsp;cursorBrush,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1&lt;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function0&lt;<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>&gt;,&nbsp;<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>&gt;&nbsp;decorationBox<br>)</pre>
<p>Basic composable that enables users to edit text via hardware or software keyboard, but provides no decorations like hint or placeholder.</p>
<p>Whenever the user edits the text, <code><a href="/reference/androidx/compose/foundation/text/package-summary.html#BasicTextField(kotlin.String,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.text.TextStyle,androidx.compose.foundation.text.KeyboardOptions,androidx.compose.foundation.text.KeyboardActions,kotlin.Boolean,kotlin.Int,androidx.compose.ui.text.input.VisualTransformation,kotlin.Function1,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Brush,kotlin.Function1)">onValueChange</a></code> is called with the most up to date state represented by <code><a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-string/index.html">String</a></code> with which developer is expected to update their state.</p>
<p>Unlike <code><a href="/reference/androidx/compose/ui/text/input/TextFieldValue.html">TextFieldValue</a></code> overload, this composable does not let the developer to control selection, cursor and text composition information. Please check <code><a href="/reference/androidx/compose/ui/text/input/TextFieldValue.html">TextFieldValue</a></code> and corresponding <code><a href="/reference/androidx/compose/foundation/text/package-summary.html#BasicTextField(kotlin.String,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.text.TextStyle,androidx.compose.foundation.text.KeyboardOptions,androidx.compose.foundation.text.KeyboardActions,kotlin.Boolean,kotlin.Int,androidx.compose.ui.text.input.VisualTransformation,kotlin.Function1,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Brush,kotlin.Function1)">BasicTextField</a></code> overload for more information.</p>
<p>It is crucial that the value provided in the <code><a href="/reference/androidx/compose/foundation/text/package-summary.html#BasicTextField(kotlin.String,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.text.TextStyle,androidx.compose.foundation.text.KeyboardOptions,androidx.compose.foundation.text.KeyboardActions,kotlin.Boolean,kotlin.Int,androidx.compose.ui.text.input.VisualTransformation,kotlin.Function1,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Brush,kotlin.Function1)">onValueChange</a></code> is fed back into <code><a href="/reference/androidx/compose/foundation/text/package-summary.html#BasicTextField(kotlin.String,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.text.TextStyle,androidx.compose.foundation.text.KeyboardOptions,androidx.compose.foundation.text.KeyboardActions,kotlin.Boolean,kotlin.Int,androidx.compose.ui.text.input.VisualTransformation,kotlin.Function1,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Brush,kotlin.Function1)">BasicTextField</a></code> in order to have the final state of the text being displayed.</p>
<p>Example usage:</p>
<pre class="prettyprint">
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
var value by rememberSaveable { mutableStateOf(&quot;initial value&quot;) }
BasicTextField(
value = value,
onValueChange = {
// it is crucial that the update is fed back into BasicTextField in order to
// see updates on the text
value = it
}
)</pre>
<p>Please keep in mind that <code><a href="/reference/androidx/compose/foundation/text/package-summary.html#BasicTextField(kotlin.String,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.text.TextStyle,androidx.compose.foundation.text.KeyboardOptions,androidx.compose.foundation.text.KeyboardActions,kotlin.Boolean,kotlin.Int,androidx.compose.ui.text.input.VisualTransformation,kotlin.Function1,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Brush,kotlin.Function1)">onValueChange</a></code> is useful to be informed about the latest state of the text input by users, however it is generally not recommended to modify the value that you get via <code><a href="/reference/androidx/compose/foundation/text/package-summary.html#BasicTextField(kotlin.String,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.text.TextStyle,androidx.compose.foundation.text.KeyboardOptions,androidx.compose.foundation.text.KeyboardActions,kotlin.Boolean,kotlin.Int,androidx.compose.ui.text.input.VisualTransformation,kotlin.Function1,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Brush,kotlin.Function1)">onValueChange</a></code> callback. Any change to this value may result in a context reset and end up with input session restart. Such a scenario would cause glitches in the UI or text input experience for users.</p>
<p>This composable provides basic text editing functionality, however does not include any decorations such as borders, hints/placeholder. A design system based implementation such as Material Design Filled text field is typically what is needed to cover most of the needs. This composable is designed to be used when a custom implementation for different design system is needed.</p>
<p>For example, if you need to include a placeholder in your TextField, you can write a composable using the decoration box like this:</p>
<pre class="prettyprint">
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
var value by rememberSaveable { mutableStateOf(&quot;initial value&quot;) }
Box {
BasicTextField(
value = value,
onValueChange = { value = it }
)
if (value.isEmpty()) {
Text(text = &quot;Placeholder&quot;)
}
}</pre>
<p>If you want to add decorations to your text field, such as icon or similar, and increase the hit target area, use the decoration box:</p>
<pre class="prettyprint">
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material.Icon
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
var value by rememberSaveable { mutableStateOf(&quot;initial value&quot;) }
BasicTextField(
value = value,
onValueChange = { value = it },
decorationBox = { innerTextField -&gt;
// Because the decorationBox is used, the whole Row gets the same behaviour as the
// internal input field would have otherwise. For example, there is no need to add a
// Modifier.clickable to the Row anymore to bring the text field into focus when user
// taps on a larger text field area which includes paddings and the icon areas.
Row(
Modifier
.background(Color.LightGray, RoundedCornerShape(percent = 30))
.padding(16.dp)
) {
Icon(Icons.Default.MailOutline, contentDescription = null)
Spacer(Modifier.width(16.dp))
innerTextField()
}
}
)</pre>
<div class="devsite-table-wrapper">
<table class="responsive">
<colgroup>
<col width="40%">
<col>
</colgroup>
<thead>
<tr>
<th colspan="100%">Parameters</th>
</tr>
</thead>
<tbody class="list">
<tr>
<td><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/String.html">String</a>&nbsp;value</code></td>
<td>
<p>the input <code><a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-string/index.html">String</a></code> text to be shown in the text field</p>
</td>
</tr>
<tr>
<td><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1&lt;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/String.html">String</a>,&nbsp;<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>&gt;&nbsp;onValueChange</code></td>
<td>
<p>the callback that is triggered when the input service updates the text. An updated text comes as a parameter of the callback</p>
</td>
</tr>
<tr>
<td><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/Modifier.html">Modifier</a>&nbsp;modifier</code></td>
<td>
<p>optional <code><a href="/reference/androidx/compose/ui/Modifier.html">Modifier</a></code> for this text field.</p>
</td>
</tr>
<tr>
<td><code>boolean&nbsp;enabled</code></td>
<td>
<p>controls the enabled state of the <code><a href="/reference/androidx/compose/foundation/text/package-summary.html#BasicTextField(kotlin.String,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.text.TextStyle,androidx.compose.foundation.text.KeyboardOptions,androidx.compose.foundation.text.KeyboardActions,kotlin.Boolean,kotlin.Int,androidx.compose.ui.text.input.VisualTransformation,kotlin.Function1,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Brush,kotlin.Function1)">BasicTextField</a></code>. When <code>false</code>, the text field will be neither editable nor focusable, the input of the text field will not be selectable</p>
</td>
</tr>
<tr>
<td><code>boolean&nbsp;readOnly</code></td>
<td>
<p>controls the editable state of the <code><a href="/reference/androidx/compose/foundation/text/package-summary.html#BasicTextField(kotlin.String,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.text.TextStyle,androidx.compose.foundation.text.KeyboardOptions,androidx.compose.foundation.text.KeyboardActions,kotlin.Boolean,kotlin.Int,androidx.compose.ui.text.input.VisualTransformation,kotlin.Function1,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Brush,kotlin.Function1)">BasicTextField</a></code>. When <code>true</code>, the text field can not be modified, however, a user can focus it and copy text from it. Read-only text fields are usually used to display pre-filled forms that user can not edit</p>
</td>
</tr>
<tr>
<td><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/text/TextStyle.html">TextStyle</a>&nbsp;textStyle</code></td>
<td>
<p>Style configuration that applies at character level such as color, font etc.</p>
</td>
</tr>
<tr>
<td><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/text/KeyboardOptions.html">KeyboardOptions</a>&nbsp;keyboardOptions</code></td>
<td>
<p>software keyboard options that contains configuration such as <code><a href="/reference/androidx/compose/ui/text/input/KeyboardType.html">KeyboardType</a></code> and <code><a href="/reference/androidx/compose/ui/text/input/ImeAction.html">ImeAction</a></code>.</p>
</td>
</tr>
<tr>
<td><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/text/KeyboardActions.html">KeyboardActions</a>&nbsp;keyboardActions</code></td>
<td>
<p>when the input service emits an IME action, the corresponding callback is called. Note that this IME action may be different from what you specified in <code><a href="/reference/androidx/compose/foundation/text/KeyboardOptions.html#imeAction()">KeyboardOptions.imeAction</a></code>.</p>
</td>
</tr>
<tr>
<td><code>boolean&nbsp;singleLine</code></td>
<td>
<p>when set to true, this text field becomes a single horizontally scrolling text field instead of wrapping onto multiple lines. The keyboard will be informed to not show the return key as the <code><a href="/reference/androidx/compose/ui/text/input/ImeAction.html">ImeAction</a></code>. Note that <code><a href="/reference/androidx/compose/foundation/text/package-summary.html#BasicTextField(kotlin.String,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.text.TextStyle,androidx.compose.foundation.text.KeyboardOptions,androidx.compose.foundation.text.KeyboardActions,kotlin.Boolean,kotlin.Int,androidx.compose.ui.text.input.VisualTransformation,kotlin.Function1,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Brush,kotlin.Function1)">maxLines</a></code> parameter will be ignored as the maxLines attribute will be automatically set to 1.</p>
</td>
</tr>
<tr>
<td><code>int&nbsp;maxLines</code></td>
<td>
<p>the maximum height in terms of maximum number of visible lines. Should be equal or greater than 1. Note that this parameter will be ignored and instead maxLines will be set to 1 if <code><a href="/reference/androidx/compose/foundation/text/package-summary.html#BasicTextField(kotlin.String,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.text.TextStyle,androidx.compose.foundation.text.KeyboardOptions,androidx.compose.foundation.text.KeyboardActions,kotlin.Boolean,kotlin.Int,androidx.compose.ui.text.input.VisualTransformation,kotlin.Function1,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Brush,kotlin.Function1)">singleLine</a></code> is set to true.</p>
</td>
</tr>
<tr>
<td><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/text/input/VisualTransformation.html">VisualTransformation</a>&nbsp;visualTransformation</code></td>
<td>
<p>The visual transformation filter for changing the visual representation of the input. By default no visual transformation is applied.</p>
</td>
</tr>
<tr>
<td><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1&lt;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/text/TextLayoutResult.html">TextLayoutResult</a>,&nbsp;<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>&gt;&nbsp;onTextLayout</code></td>
<td>
<p>Callback that is executed when a new text layout is calculated. A <code><a href="/reference/androidx/compose/ui/text/TextLayoutResult.html">TextLayoutResult</a></code> object that callback provides contains paragraph information, size of the text, baselines and other details. The callback can be used to add additional decoration or functionality to the text. For example, to draw a cursor or selection around the text.</p>
</td>
</tr>
<tr>
<td><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/interaction/MutableInteractionSource.html">MutableInteractionSource</a>&nbsp;interactionSource</code></td>
<td>
<p>the <code><a href="/reference/androidx/compose/foundation/interaction/MutableInteractionSource.html">MutableInteractionSource</a></code> representing the stream of <code><a href="/reference/androidx/compose/foundation/interaction/Interaction.html">Interaction</a></code>s for this TextField. You can create and pass in your own remembered <code><a href="/reference/androidx/compose/foundation/interaction/MutableInteractionSource.html">MutableInteractionSource</a></code> if you want to observe <code><a href="/reference/androidx/compose/foundation/interaction/Interaction.html">Interaction</a></code>s and customize the appearance / behavior of this TextField in different <code><a href="/reference/androidx/compose/foundation/interaction/Interaction.html">Interaction</a></code>s.</p>
</td>
</tr>
<tr>
<td><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/graphics/Brush.html">Brush</a>&nbsp;cursorBrush</code></td>
<td>
<p><code><a href="/reference/androidx/compose/ui/graphics/Brush.html">Brush</a></code> to paint cursor with. If <code><a href="/reference/androidx/compose/ui/graphics/SolidColor.html">SolidColor</a></code> with <code><a href="/reference/androidx/compose/ui/graphics/Color.Companion.html#Unspecified()">Color.Unspecified</a></code> provided, there will be no cursor drawn</p>
</td>
</tr>
<tr>
<td><code>@<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1&lt;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function0&lt;<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>&gt;,&nbsp;<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>&gt;&nbsp;decorationBox</code></td>
<td>
<p>Composable lambda that allows to add decorations around text field, such as icon, placeholder, helper messages or similar, and automatically increase the hit target area of the text field. To allow you to control the placement of the inner text field relative to your decorations, the text field implementation will pass in a framework-controlled composable parameter &quot;innerTextField&quot; to the decorationBox lambda you provide. You must call innerTextField exactly once.</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="api-item"><a name="BasicTextField(androidx.compose.ui.text.input.TextFieldValue, kotlin.Function1, androidx.compose.ui.Modifier, kotlin.Boolean, kotlin.Boolean, androidx.compose.ui.text.TextStyle, androidx.compose.foundation.text.KeyboardOptions, androidx.compose.foundation.text.KeyboardActions, kotlin.Boolean, kotlin.Int, androidx.compose.ui.text.input.VisualTransformation, kotlin.Function1, androidx.compose.foundation.interaction.MutableInteractionSource, androidx.compose.ui.graphics.Brush, kotlin.Function1)"></a><a name="BasicTextField-androidx.compose.ui.text.input.TextFieldValue-kotlin.Function1-androidx.compose.ui.Modifier-kotlin.Boolean-kotlin.Boolean-androidx.compose.ui.text.TextStyle-androidx.compose.foundation.text.KeyboardOptions-androidx.compose.foundation.text.KeyboardActions-kotlin.Boolean-kotlin.Int-androidx.compose.ui.text.input.VisualTransformation-kotlin.Function1-androidx.compose.foundation.interaction.MutableInteractionSource-androidx.compose.ui.graphics.Brush-kotlin.Function1-"></a><a name="basictextfield"></a>
<h3 class="api-name" id="BasicTextField(androidx.compose.ui.text.input.TextFieldValue,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.text.TextStyle,androidx.compose.foundation.text.KeyboardOptions,androidx.compose.foundation.text.KeyboardActions,kotlin.Boolean,kotlin.Int,androidx.compose.ui.text.input.VisualTransformation,kotlin.Function1,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Brush,kotlin.Function1)">BasicTextField</h3>
<pre class="api-signature no-pretty-print">@<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a><br>public&nbsp;static&nbsp;final&nbsp;void&nbsp;<a href="/reference/androidx/compose/foundation/text/BasicTextFieldKt.html#BasicTextField(androidx.compose.ui.text.input.TextFieldValue,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.text.TextStyle,androidx.compose.foundation.text.KeyboardOptions,androidx.compose.foundation.text.KeyboardActions,kotlin.Boolean,kotlin.Int,androidx.compose.ui.text.input.VisualTransformation,kotlin.Function1,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Brush,kotlin.Function1)">BasicTextField</a>(<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/text/input/TextFieldValue.html">TextFieldValue</a>&nbsp;value,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1&lt;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/text/input/TextFieldValue.html">TextFieldValue</a>,&nbsp;<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>&gt;&nbsp;onValueChange,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/Modifier.html">Modifier</a>&nbsp;modifier,<br>&nbsp;&nbsp;&nbsp;&nbsp;boolean&nbsp;enabled,<br>&nbsp;&nbsp;&nbsp;&nbsp;boolean&nbsp;readOnly,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/text/TextStyle.html">TextStyle</a>&nbsp;textStyle,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/text/KeyboardOptions.html">KeyboardOptions</a>&nbsp;keyboardOptions,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/text/KeyboardActions.html">KeyboardActions</a>&nbsp;keyboardActions,<br>&nbsp;&nbsp;&nbsp;&nbsp;boolean&nbsp;singleLine,<br>&nbsp;&nbsp;&nbsp;&nbsp;int&nbsp;maxLines,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/text/input/VisualTransformation.html">VisualTransformation</a>&nbsp;visualTransformation,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1&lt;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/text/TextLayoutResult.html">TextLayoutResult</a>,&nbsp;<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>&gt;&nbsp;onTextLayout,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/interaction/MutableInteractionSource.html">MutableInteractionSource</a>&nbsp;interactionSource,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/graphics/Brush.html">Brush</a>&nbsp;cursorBrush,<br>&nbsp;&nbsp;&nbsp;&nbsp;@<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1&lt;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function0&lt;<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>&gt;,&nbsp;<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>&gt;&nbsp;decorationBox<br>)</pre>
<p>Basic composable that enables users to edit text via hardware or software keyboard, but provides no decorations like hint or placeholder.</p>
<p>Whenever the user edits the text, <code><a href="/reference/androidx/compose/foundation/text/package-summary.html#BasicTextField(androidx.compose.ui.text.input.TextFieldValue,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.text.TextStyle,androidx.compose.foundation.text.KeyboardOptions,androidx.compose.foundation.text.KeyboardActions,kotlin.Boolean,kotlin.Int,androidx.compose.ui.text.input.VisualTransformation,kotlin.Function1,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Brush,kotlin.Function1)">onValueChange</a></code> is called with the most up to date state represented by <code><a href="/reference/androidx/compose/ui/text/input/TextFieldValue.html">TextFieldValue</a></code>. <code><a href="/reference/androidx/compose/ui/text/input/TextFieldValue.html">TextFieldValue</a></code> contains the text entered by user, as well as selection, cursor and text composition information. Please check <code><a href="/reference/androidx/compose/ui/text/input/TextFieldValue.html">TextFieldValue</a></code> for the description of its contents.</p>
<p>It is crucial that the value provided in the <code><a href="/reference/androidx/compose/foundation/text/package-summary.html#BasicTextField(androidx.compose.ui.text.input.TextFieldValue,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.text.TextStyle,androidx.compose.foundation.text.KeyboardOptions,androidx.compose.foundation.text.KeyboardActions,kotlin.Boolean,kotlin.Int,androidx.compose.ui.text.input.VisualTransformation,kotlin.Function1,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Brush,kotlin.Function1)">onValueChange</a></code> is fed back into <code><a href="/reference/androidx/compose/foundation/text/package-summary.html#BasicTextField(kotlin.String,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.text.TextStyle,androidx.compose.foundation.text.KeyboardOptions,androidx.compose.foundation.text.KeyboardActions,kotlin.Boolean,kotlin.Int,androidx.compose.ui.text.input.VisualTransformation,kotlin.Function1,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Brush,kotlin.Function1)">BasicTextField</a></code> in order to have the final state of the text being displayed.</p>
<p>Example usage:</p>
<pre class="prettyprint">
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.text.input.TextFieldValue
var value by rememberSaveable(stateSaver = TextFieldValue.Saver) {
mutableStateOf(TextFieldValue())
}
BasicTextField(
value = value,
onValueChange = {
// it is crucial that the update is fed back into BasicTextField in order to
// see updates on the text
value = it
}
)</pre>
<p>Please keep in mind that <code><a href="/reference/androidx/compose/foundation/text/package-summary.html#BasicTextField(androidx.compose.ui.text.input.TextFieldValue,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.text.TextStyle,androidx.compose.foundation.text.KeyboardOptions,androidx.compose.foundation.text.KeyboardActions,kotlin.Boolean,kotlin.Int,androidx.compose.ui.text.input.VisualTransformation,kotlin.Function1,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Brush,kotlin.Function1)">onValueChange</a></code> is useful to be informed about the latest state of the text input by users, however it is generally not recommended to modify the values in the <code><a href="/reference/androidx/compose/ui/text/input/TextFieldValue.html">TextFieldValue</a></code> that you get via <code><a href="/reference/androidx/compose/foundation/text/package-summary.html#BasicTextField(androidx.compose.ui.text.input.TextFieldValue,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.text.TextStyle,androidx.compose.foundation.text.KeyboardOptions,androidx.compose.foundation.text.KeyboardActions,kotlin.Boolean,kotlin.Int,androidx.compose.ui.text.input.VisualTransformation,kotlin.Function1,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Brush,kotlin.Function1)">onValueChange</a></code> callback. Any change to the values in <code><a href="/reference/androidx/compose/ui/text/input/TextFieldValue.html">TextFieldValue</a></code> may result in a context reset and end up with input session restart. Such a scenario would cause glitches in the UI or text input experience for users.</p>
<p>This composable provides basic text editing functionality, however does not include any decorations such as borders, hints/placeholder. A design system based implementation such as Material Design Filled text field is typically what is needed to cover most of the needs. This composable is designed to be used when a custom implementation for different design system is needed.</p>
<p>For example, if you need to include a placeholder in your TextField, you can write a composable using the decoration box like this:</p>
<pre class="prettyprint">
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
var value by rememberSaveable { mutableStateOf(&quot;initial value&quot;) }
Box {
BasicTextField(
value = value,
onValueChange = { value = it }
)
if (value.isEmpty()) {
Text(text = &quot;Placeholder&quot;)
}
}</pre>
<p>If you want to add decorations to your text field, such as icon or similar, and increase the hit target area, use the decoration box:</p>
<pre class="prettyprint">
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material.Icon
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
var value by rememberSaveable { mutableStateOf(&quot;initial value&quot;) }
BasicTextField(
value = value,
onValueChange = { value = it },
decorationBox = { innerTextField -&gt;
// Because the decorationBox is used, the whole Row gets the same behaviour as the
// internal input field would have otherwise. For example, there is no need to add a
// Modifier.clickable to the Row anymore to bring the text field into focus when user
// taps on a larger text field area which includes paddings and the icon areas.
Row(
Modifier
.background(Color.LightGray, RoundedCornerShape(percent = 30))
.padding(16.dp)
) {
Icon(Icons.Default.MailOutline, contentDescription = null)
Spacer(Modifier.width(16.dp))
innerTextField()
}
}
)</pre>
<div class="devsite-table-wrapper">
<table class="responsive">
<colgroup>
<col width="40%">
<col>
</colgroup>
<thead>
<tr>
<th colspan="100%">Parameters</th>
</tr>
</thead>
<tbody class="list">
<tr>
<td><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/text/input/TextFieldValue.html">TextFieldValue</a>&nbsp;value</code></td>
<td>
<p>The <code><a href="/reference/androidx/compose/ui/text/input/TextFieldValue.html">androidx.compose.ui.text.input.TextFieldValue</a></code> to be shown in the <code><a href="/reference/androidx/compose/foundation/text/package-summary.html#BasicTextField(kotlin.String,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.text.TextStyle,androidx.compose.foundation.text.KeyboardOptions,androidx.compose.foundation.text.KeyboardActions,kotlin.Boolean,kotlin.Int,androidx.compose.ui.text.input.VisualTransformation,kotlin.Function1,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Brush,kotlin.Function1)">BasicTextField</a></code>.</p>
</td>
</tr>
<tr>
<td><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1&lt;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/text/input/TextFieldValue.html">TextFieldValue</a>,&nbsp;<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>&gt;&nbsp;onValueChange</code></td>
<td>
<p>Called when the input service updates the values in <code><a href="/reference/androidx/compose/ui/text/input/TextFieldValue.html">TextFieldValue</a></code>.</p>
</td>
</tr>
<tr>
<td><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/Modifier.html">Modifier</a>&nbsp;modifier</code></td>
<td>
<p>optional <code><a href="/reference/androidx/compose/ui/Modifier.html">Modifier</a></code> for this text field.</p>
</td>
</tr>
<tr>
<td><code>boolean&nbsp;enabled</code></td>
<td>
<p>controls the enabled state of the <code><a href="/reference/androidx/compose/foundation/text/package-summary.html#BasicTextField(kotlin.String,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.text.TextStyle,androidx.compose.foundation.text.KeyboardOptions,androidx.compose.foundation.text.KeyboardActions,kotlin.Boolean,kotlin.Int,androidx.compose.ui.text.input.VisualTransformation,kotlin.Function1,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Brush,kotlin.Function1)">BasicTextField</a></code>. When <code>false</code>, the text field will be neither editable nor focusable, the input of the text field will not be selectable</p>
</td>
</tr>
<tr>
<td><code>boolean&nbsp;readOnly</code></td>
<td>
<p>controls the editable state of the <code><a href="/reference/androidx/compose/foundation/text/package-summary.html#BasicTextField(kotlin.String,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.text.TextStyle,androidx.compose.foundation.text.KeyboardOptions,androidx.compose.foundation.text.KeyboardActions,kotlin.Boolean,kotlin.Int,androidx.compose.ui.text.input.VisualTransformation,kotlin.Function1,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Brush,kotlin.Function1)">BasicTextField</a></code>. When <code>true</code>, the text field can not be modified, however, a user can focus it and copy text from it. Read-only text fields are usually used to display pre-filled forms that user can not edit</p>
</td>
</tr>
<tr>
<td><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/text/TextStyle.html">TextStyle</a>&nbsp;textStyle</code></td>
<td>
<p>Style configuration that applies at character level such as color, font etc.</p>
</td>
</tr>
<tr>
<td><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/text/KeyboardOptions.html">KeyboardOptions</a>&nbsp;keyboardOptions</code></td>
<td>
<p>software keyboard options that contains configuration such as <code><a href="/reference/androidx/compose/ui/text/input/KeyboardType.html">KeyboardType</a></code> and <code><a href="/reference/androidx/compose/ui/text/input/ImeAction.html">ImeAction</a></code>.</p>
</td>
</tr>
<tr>
<td><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/text/KeyboardActions.html">KeyboardActions</a>&nbsp;keyboardActions</code></td>
<td>
<p>when the input service emits an IME action, the corresponding callback is called. Note that this IME action may be different from what you specified in <code><a href="/reference/androidx/compose/foundation/text/KeyboardOptions.html#imeAction()">KeyboardOptions.imeAction</a></code>.</p>
</td>
</tr>
<tr>
<td><code>boolean&nbsp;singleLine</code></td>
<td>
<p>when set to true, this text field becomes a single horizontally scrolling text field instead of wrapping onto multiple lines. The keyboard will be informed to not show the return key as the <code><a href="/reference/androidx/compose/ui/text/input/ImeAction.html">ImeAction</a></code>. Note that <code><a href="/reference/androidx/compose/foundation/text/package-summary.html#BasicTextField(androidx.compose.ui.text.input.TextFieldValue,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.text.TextStyle,androidx.compose.foundation.text.KeyboardOptions,androidx.compose.foundation.text.KeyboardActions,kotlin.Boolean,kotlin.Int,androidx.compose.ui.text.input.VisualTransformation,kotlin.Function1,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Brush,kotlin.Function1)">maxLines</a></code> parameter will be ignored as the maxLines attribute will be automatically set to 1.</p>
</td>
</tr>
<tr>
<td><code>int&nbsp;maxLines</code></td>
<td>
<p>the maximum height in terms of maximum number of visible lines. Should be equal or greater than 1. Note that this parameter will be ignored and instead maxLines will be set to 1 if <code><a href="/reference/androidx/compose/foundation/text/package-summary.html#BasicTextField(androidx.compose.ui.text.input.TextFieldValue,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.text.TextStyle,androidx.compose.foundation.text.KeyboardOptions,androidx.compose.foundation.text.KeyboardActions,kotlin.Boolean,kotlin.Int,androidx.compose.ui.text.input.VisualTransformation,kotlin.Function1,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Brush,kotlin.Function1)">singleLine</a></code> is set to true.</p>
</td>
</tr>
<tr>
<td><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/text/input/VisualTransformation.html">VisualTransformation</a>&nbsp;visualTransformation</code></td>
<td>
<p>The visual transformation filter for changing the visual representation of the input. By default no visual transformation is applied.</p>
</td>
</tr>
<tr>
<td><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1&lt;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/text/TextLayoutResult.html">TextLayoutResult</a>,&nbsp;<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>&gt;&nbsp;onTextLayout</code></td>
<td>
<p>Callback that is executed when a new text layout is calculated. A <code><a href="/reference/androidx/compose/ui/text/TextLayoutResult.html">TextLayoutResult</a></code> object that callback provides contains paragraph information, size of the text, baselines and other details. The callback can be used to add additional decoration or functionality to the text. For example, to draw a cursor or selection around the text.</p>
</td>
</tr>
<tr>
<td><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/interaction/MutableInteractionSource.html">MutableInteractionSource</a>&nbsp;interactionSource</code></td>
<td>
<p>the <code><a href="/reference/androidx/compose/foundation/interaction/MutableInteractionSource.html">MutableInteractionSource</a></code> representing the stream of <code><a href="/reference/androidx/compose/foundation/interaction/Interaction.html">Interaction</a></code>s for this TextField. You can create and pass in your own remembered <code><a href="/reference/androidx/compose/foundation/interaction/MutableInteractionSource.html">MutableInteractionSource</a></code> if you want to observe <code><a href="/reference/androidx/compose/foundation/interaction/Interaction.html">Interaction</a></code>s and customize the appearance / behavior of this TextField in different <code><a href="/reference/androidx/compose/foundation/interaction/Interaction.html">Interaction</a></code>s.</p>
</td>
</tr>
<tr>
<td><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/graphics/Brush.html">Brush</a>&nbsp;cursorBrush</code></td>
<td>
<p><code><a href="/reference/androidx/compose/ui/graphics/Brush.html">Brush</a></code> to paint cursor with. If <code><a href="/reference/androidx/compose/ui/graphics/SolidColor.html">SolidColor</a></code> with <code><a href="/reference/androidx/compose/ui/graphics/Color.Companion.html#Unspecified()">Color.Unspecified</a></code> provided, there will be no cursor drawn</p>
</td>
</tr>
<tr>
<td><code>@<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1&lt;@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function0&lt;<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>&gt;,&nbsp;<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>&gt;&nbsp;decorationBox</code></td>
<td>
<p>Composable lambda that allows to add decorations around text field, such as icon, placeholder, helper messages or similar, and automatically increase the hit target area of the text field. To allow you to control the placement of the inner text field relative to your decorations, the text field implementation will pass in a framework-controlled composable parameter &quot;innerTextField&quot; to the decorationBox lambda you provide. You must call innerTextField exactly once.</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>