TextField

fun TextField(value: TextFieldValue, onValueChange: (TextFieldValue) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, readOnly: Boolean = false, required: Boolean = false, label: String? = null, placeholder: String? = null, helper: String? = null, counter: TextFieldCharacterCounter? = null, leadingContent: @Composable AddonScope.() -> Unit? = null, trailingContent: @Composable AddonScope.() -> Unit? = null, state: FormFieldStatus? = null, stateMessage: String? = null, visualTransformation: VisualTransformation = VisualTransformation.None, keyboardOptions: KeyboardOptions = KeyboardOptions.Default.copy(capitalization = KeyboardCapitalization.Sentences), keyboardActions: KeyboardActions = KeyboardActions.Default, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() })

Outlined text input to get an input value from the user.

Parameters

value

the input TextFieldValue to be shown in the text field

onValueChange

the callback that is triggered when the input service updates values in TextFieldValue. An updated TextFieldValue comes as a parameter of the callback

modifier

a Modifier for this text field

enabled

True controls the enabled state of the TextField. When false, the text field will be neither editable nor focusable, the input of the text field will not be selectable, visually text field will appear in the disabled UI state

readOnly

controls the editable state of the TextField. 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

required

add an asterisk to the label to indicate that this field is required and read it as "label mandatory" but doesn't do anything else so it's up to the developer to handle the behavior.

label

the optional label to be displayed inside the text field container. The default text style for internal Text is SparkTypography.body2 when the text field is in focus and SparkTypography.body1 when the text field is not in focus

placeholder

the optional placeholder to be displayed when the text field is in focus and the input text is empty. The default text style for internal Text is SparkTypography.body1

helper

The optional helper text to be displayed at the bottom outside the text input container that give some information about expected text

counter

The optional counter to be displayed the the end bottom outside the text input container

leadingContent

the optional leading icon to be displayed at the beginning of the text field container

trailingContent

the optional trailing icon to be displayed at the end of the text field container

state

indicates the validation state of the text field. The label, outline, leading & trailing content are tinted by the state color.

stateMessage

the optional state text to be displayed at the helper position that give more information about the state, it's displayed only when state is not null.

visualTransformation

transforms the visual representation of the input value For example, you can use PasswordVisualTransformation to create a password text field. By default no visual transformation is applied

keyboardOptions

software keyboard options that contains configuration such as KeyboardType and ImeAction

keyboardActions

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 KeyboardOptions.imeAction

interactionSource

the MutableInteractionSource representing the stream of Interactions for this TextField. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this TextField in different Interactions.

See also


fun TextField(value: String, onValueChange: (String) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, readOnly: Boolean = false, required: Boolean = false, label: String? = null, placeholder: String? = null, helper: String? = null, counter: TextFieldCharacterCounter? = null, leadingContent: @Composable AddonScope.() -> Unit? = null, trailingContent: @Composable AddonScope.() -> Unit? = null, state: FormFieldStatus? = null, stateMessage: String? = null, visualTransformation: VisualTransformation = VisualTransformation.None, keyboardOptions: KeyboardOptions = KeyboardOptions.Default.copy(capitalization = KeyboardCapitalization.Sentences), keyboardActions: KeyboardActions = KeyboardActions.Default, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() })

Outlined text input to get an input value from the user.

Parameters

value

the input text to be shown in the text field

onValueChange

the callback that is triggered when the input service updates the text. An updated text comes as a parameter of the callback

modifier

a Modifier for this text field

enabled

True controls the enabled state of the TextField. When false, the text field will be neither editable nor focusable, the input of the text field will not be selectable, visually text field will appear in the disabled UI state

readOnly

controls the editable state of the TextField. 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

required

add an asterisk to the label to indicate that this field is required and read it as "label mandatory" but doesn't do anything else so it's up to the developer to handle the behavior.

label

the optional label to be displayed inside the text field container. The default text style for internal Text is SparkTypography.body2 when the text field is in focus and SparkTypography.body1 when the text field is not in focus

placeholder

the optional placeholder to be displayed when the text field is in focus and the input text is empty. The default text style for internal Text is SparkTypography.body1

helper

The optional helper text to be displayed at the bottom outside the text input container that give some information about expected text

counter

The optional counter to be displayed the the end bottom outside the text input container

leadingContent

the optional leading icon to be displayed at the beginning of the text field container, note that

trailingContent

the optional trailing icon to be displayed at the end of the text field container

state

indicates the validation state of the text field. The label, outline, leading & trailing content are tinted by the state color.

stateMessage

the optional state text to be displayed at the helper position that give more information about the state, it's displayed only when state is not null.

visualTransformation

transforms the visual representation of the input value For example, you can use PasswordVisualTransformation to create a password text field. By default no visual transformation is applied

keyboardOptions

software keyboard options that contains configuration such as KeyboardType and ImeAction

keyboardActions

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 KeyboardOptions.imeAction

interactionSource

the MutableInteractionSource representing the stream of Interactions for this TextField. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this TextField in different Interactions.

See also


fun TextField(state: TextFieldState, modifier: Modifier = Modifier, enabled: Boolean = true, readOnly: Boolean = false, required: Boolean = false, label: String? = null, placeholder: String? = null, helper: String? = null, counter: TextFieldCharacterCounter? = null, leadingContent: @Composable AddonScope.() -> Unit? = null, trailingContent: @Composable AddonScope.() -> Unit? = null, status: FormFieldStatus? = null, statusMessage: String? = null, inputTransformation: InputTransformation? = null, keyboardOptions: KeyboardOptions = KeyboardOptions.Default, onKeyboardAction: KeyboardActionHandler? = null, onTextLayout: Density.(getResult: () -> TextLayoutResult?) -> Unit? = null, interactionSource: MutableInteractionSource? = null, outputTransformation: OutputTransformation? = null, scrollState: ScrollState = rememberScrollState())

Outlined text input to get an input value from the user using the new TextFieldState API. All the editing state of this composable is hoisted through state. Whenever the contents of

  • this composable change via user input or semantics, TextFieldState.text gets updated.

  • Similarly, all the programmatic updates made to state also reflect on this composable.

Parameters

state

the TextFieldState that manages the text field's state

modifier

a Modifier for this text field

enabled

True controls the enabled state of the TextField. When false, the text field will be neither editable nor focusable, the input of the text field will not be selectable, visually text field will appear in the disabled UI state

readOnly

controls the editable state of the TextField. 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

inputTransformation

Optional InputTransformation that will be used to transform changes to the TextFieldState made by the user. The transformation will be applied to changes made by hardware and software keyboard events, pasting or dropping text, accessibility services, and tests. The transformation will not be applied when changing the state programmatically, or when the transformation is changed. If the transformation is changed on an existing text field, it will be applied to the next user edit. the transformation will not immediately affect the current state.

textStyle

the style to be applied to the input text

keyboardOptions

software keyboard options that contains configuration such as KeyboardType and ImeAction

onKeyboardAction

Called when the user presses the action button in the input method editor (IME), or by pressing the enter key on a hardware keyboard. By default this parameter is null, and would execute the default behavior for a received IME Action e.g., ImeAction.Done would close the keyboard, ImeAction.Next would switch the focus to the next focusable item on the screen.

lineLimits

the limits for the number of lines in the text field

onTextLayout

callback that is executed when the text layout is calculated

interactionSource

the MutableInteractionSource representing the stream of Interactions for this TextField. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this TextField in different Interactions.

outputTransformation

transforms the output text before it is displayed

scrollState

the scroll state for the text field

See also

BasicTextField