State of Compose 2023 results are in! Click here to learn more

← Back to Foundation

CoreTextField

Component
in
Foundation
. Since 1.0.0-alpha08

Overview

Code Examples

Base composable that enables users to edit text via hardware or software keyboard.

This composable provides basic text editing functionality, however does not include any decorations such as borders, hints/placeholder.

If the editable text is larger than the size of the container, the vertical scrolling behaviour will be automatically applied. To enable a single line behaviour with horizontal scrolling instead, set the maxLines parameter to 1, softWrap to false, and ImeOptions.singleLine to true.

Whenever the user edits the text, onValueChange is called with the most up to date state represented by TextFieldValue. TextFieldValue contains the text entered by user, as well as selection, cursor and text composition information. Please check TextFieldValue for the description of its contents.

It is crucial that the value provided in the onValueChange is fed back into CoreTextField in order to have the final state of the text being displayed.

Overloads

CoreTextField

@Composable
@OptIn(
    ExperimentalTextApi::class,
    MouseTemporaryApi::class
)
@InternalTextApi
fun CoreTextField(
    value: TextFieldValue,
    onValueChange: (TextFieldValue) -> Unit,
    modifier: Modifier = Modifier,
    textStyle: TextStyle = TextStyle.Default,
    onImeActionPerformed: (ImeAction) -> Unit = {},
    visualTransformation: VisualTransformation = VisualTransformation.None,
    onTextLayout: (TextLayoutResult) -> Unit = {},
    onTextInputStarted: (SoftwareKeyboardController) -> Unit = {},
    interactionState: InteractionState? = null,
    cursorColor: Color = Color.Unspecified,
    softWrap: Boolean = true,
    maxLines: Int = Int.MAX_VALUE,
    imeOptions: ImeOptions = ImeOptions.Default,
    enabled: Boolean = true,
    readOnly: Boolean = false,
    decorationBox: @Composable (innerTextField: @Composable () -> Unit) -> Unit =
        @Composable { innerTextField -> innerTextField() }
)

Parameters

NameDescription
valueThe androidx.compose.ui.text.input.TextFieldValue to be shown in the CoreTextField.
onValueChangeCalled when the input service updates the values in TextFieldValue.
modifieroptional Modifier for this text field.
textStyleStyle configuration that applies at character level such as color, font etc.
onImeActionPerformedCalled when the input service requested an IME action. When the input service emitted an IME action, this callback is called with the emitted IME action. Note that this IME action may be different from what you specified in imeAction.
visualTransformationThe visual transformation filter for changing the visual representation of the input. By default no visual transformation is applied.
onTextLayoutCallback that is executed when a new text layout is calculated.
onTextInputStartedCallback that is executed when the initialization has done for communicating with platform text input service, e.g. software keyboard on Android. Called with SoftwareKeyboardController instance which can be used for requesting input show/hide software keyboard.
interactionStateThe InteractionState representing the different Interactions present on this TextField. You can create and pass in your own remembered InteractionState if you want to read the InteractionState and customize the appearance / behavior of this TextField in different Interactions.
cursorColorColor of the cursor. If Color.Unspecified, there will be no cursor drawn
softWrapWhether the text should break at soft line breaks. If false, the glyphs in the text will be positioned as if there was unlimited horizontal space.
maxLinesThe maximum height in terms of maximum number of visible lines. Should be equal or greater than 1.
imeOptionsContains different IME configuration options.
enabledcontrols the enabled state of the text field. When false, the text field will be neither editable nor focusable, the input of the text field will not be selectable
readOnlycontrols the editable state of the CoreTextField. When true, 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
decorationBoxComposable 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 "innerTextField" to the decorationBox lambda you provide. You must call innerTextField exactly once