OutlinedTextField

Functions summary

`Unit`	@Composable OutlinedTextField( state: TextFieldState, modifier: Modifier, enabled: Boolean, readOnly: Boolean, textStyle: TextStyle, label: (@Composable () -> Unit)?, placeholder: (@Composable () -> Unit)?, leadingIcon: (@Composable () -> Unit)?, trailingIcon: (@Composable () -> Unit)?, isError: Boolean, inputTransformation: InputTransformation?, outputTransformation: OutputTransformation?, keyboardOptions: KeyboardOptions, onKeyboardAction: KeyboardActionHandler?, lineLimits: TextFieldLineLimits, scrollState: ScrollState, shape: Shape, colors: TextFieldColors, interactionSource: MutableInteractionSource? ) Material Design outlined text field.	Cmn
`Unit`	@Composable OutlinedTextField( value: String, onValueChange: (String) -> Unit, modifier: Modifier, enabled: Boolean, readOnly: Boolean, textStyle: TextStyle, label: (@Composable () -> Unit)?, placeholder: (@Composable () -> Unit)?, leadingIcon: (@Composable () -> Unit)?, trailingIcon: (@Composable () -> Unit)?, isError: Boolean, visualTransformation: VisualTransformation, keyboardOptions: KeyboardOptions, keyboardActions: KeyboardActions, singleLine: Boolean, maxLines: Int, minLines: Int, interactionSource: MutableInteractionSource?, shape: Shape, colors: TextFieldColors ) Material Design outlined text field.	Cmn
`Unit`	@Composable OutlinedTextField( value: TextFieldValue, onValueChange: (TextFieldValue) -> Unit, modifier: Modifier, enabled: Boolean, readOnly: Boolean, textStyle: TextStyle, label: (@Composable () -> Unit)?, placeholder: (@Composable () -> Unit)?, leadingIcon: (@Composable () -> Unit)?, trailingIcon: (@Composable () -> Unit)?, isError: Boolean, visualTransformation: VisualTransformation, keyboardOptions: KeyboardOptions, keyboardActions: KeyboardActions, singleLine: Boolean, maxLines: Int, minLines: Int, interactionSource: MutableInteractionSource?, shape: Shape, colors: TextFieldColors ) Material Design outlined text field.	Cmn

Functions

OutlinedTextField

Cmn

Artifact: androidx.compose.material:material

View Source

Added in 1.8.0

@Composable
fun OutlinedTextField(
    state: TextFieldState,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    readOnly: Boolean = false,
    textStyle: TextStyle = LocalTextStyle.current,
    label: (@Composable () -> Unit)? = null,
    placeholder: (@Composable () -> Unit)? = null,
    leadingIcon: (@Composable () -> Unit)? = null,
    trailingIcon: (@Composable () -> Unit)? = null,
    isError: Boolean = false,
    inputTransformation: InputTransformation? = null,
    outputTransformation: OutputTransformation? = null,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    onKeyboardAction: KeyboardActionHandler? = null,
    lineLimits: TextFieldLineLimits = TextFieldLineLimits.Default,
    scrollState: ScrollState = rememberScrollState(),
    shape: Shape = TextFieldDefaults.OutlinedTextFieldShape,
    colors: TextFieldColors = TextFieldDefaults.outlinedTextFieldColors(),
    interactionSource: MutableInteractionSource? = null
): Unit

Material Design outlined text field.

Outlined text fields have less visual emphasis than filled text fields. When they appear in places like forms, where many text fields are placed together, their reduced emphasis helps simplify the layout.

Outlined text field
image

If you are looking for a filled version, see TextField. For a text field specifically designed for passwords or other secure content, see OutlinedSecureTextField.

This overload of OutlinedTextField uses TextFieldState to keep track of its text content and position of the cursor or selection.

See example usage:

import androidx.compose.foundation.text.input.TextFieldLineLimits
import androidx.compose.foundation.text.input.rememberTextFieldState
import androidx.compose.material.OutlinedTextField
import androidx.compose.material.Text
import androidx.compose.material.TextField
import androidx.compose.runtime.remember

OutlinedTextField(
    state = rememberTextFieldState(),
    label = { Text("Label") },
    lineLimits = TextFieldLineLimits.SingleLine,
)

import androidx.compose.foundation.text.input.TextFieldLineLimits
import androidx.compose.foundation.text.input.rememberTextFieldState
import androidx.compose.material.OutlinedTextField
import androidx.compose.material.Text
import androidx.compose.material.TextField
import androidx.compose.runtime.remember
import androidx.compose.ui.text.TextRange

val state = rememberTextFieldState("Initial text", TextRange(0, 12))
OutlinedTextField(
    state = state,
    label = { Text("Label") },
    lineLimits = TextFieldLineLimits.SingleLine,
)

Parameters
`state: TextFieldState`	`TextFieldState` object that holds the internal editing state of this text field.
`modifier: Modifier = Modifier`	a `Modifier` for this text field
`enabled: Boolean = true`	controls the enabled state of the `OutlinedTextField`. 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: Boolean = false`	controls the editable state of the `OutlinedTextField`. 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
`textStyle: TextStyle = LocalTextStyle.current`	the style to be applied to the input text. The default `textStyle` uses the `LocalTextStyle` defined by the theme
`label: (@Composable () -> Unit)? = null`	the optional label to be displayed inside the text field container. The default text style for internal `Text` is `Typography.caption` when the text field is in focus and `Typography.subtitle1` when the text field is not in focus
`placeholder: (@Composable () -> Unit)? = null`	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 `Typography.subtitle1`
`leadingIcon: (@Composable () -> Unit)? = null`	the optional leading icon to be displayed at the beginning of the text field container
`trailingIcon: (@Composable () -> Unit)? = null`	the optional trailing icon to be displayed at the end of the text field container
`isError: Boolean = false`	indicates if the text field's current value is in error. If set to true, the label, bottom indicator and trailing icon by default will be displayed in error color
`inputTransformation: InputTransformation? = null`	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`.
`outputTransformation: OutputTransformation? = null`	An `OutputTransformation` that transforms how the contents of the text field are presented.
`keyboardOptions: KeyboardOptions = KeyboardOptions.Default`	software keyboard options that contains configuration such as `KeyboardType` and `ImeAction`
`onKeyboardAction: KeyboardActionHandler? = null`	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: TextFieldLineLimits = TextFieldLineLimits.Default`	Whether the text field should be `SingleLine`, scroll horizontally, and ignore newlines; or `MultiLine` and grow and scroll vertically. If `SingleLine` is passed, all newline characters ('\n') within the text will be replaced with regular whitespace (' '), ensuring that the contents of the text field are presented in a single line.
`scrollState: ScrollState = rememberScrollState()`	Scroll state that manages either horizontal or vertical scroll of the text field. If `lineLimits` is `SingleLine`, this text field is treated as single line with horizontal scroll behavior. In other cases the text field becomes vertically scrollable.
`shape: Shape = TextFieldDefaults.OutlinedTextFieldShape`	the shape of the text field's border
`colors: TextFieldColors = TextFieldDefaults.outlinedTextFieldColors()`	`TextFieldColors` that will be used to resolve color of the text and content (including label, placeholder, leading and trailing icons, border) for this text field in different states. See `TextFieldDefaults.outlinedTextFieldColors`
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this text field. You can use this to change the text field's appearance or preview the text field in different states. Note that if `null` is provided, interactions will still happen internally.

OutlinedTextField

Cmn

Artifact: androidx.compose.material:material

View Source

Added in 1.4.0

@Composable
fun OutlinedTextField(
    value: String,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    readOnly: Boolean = false,
    textStyle: TextStyle = LocalTextStyle.current,
    label: (@Composable () -> Unit)? = null,
    placeholder: (@Composable () -> Unit)? = null,
    leadingIcon: (@Composable () -> Unit)? = null,
    trailingIcon: (@Composable () -> Unit)? = null,
    isError: Boolean = false,
    visualTransformation: VisualTransformation = VisualTransformation.None,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    keyboardActions: KeyboardActions = KeyboardActions.Default,
    singleLine: Boolean = false,
    maxLines: Int = if (singleLine) 1 else Int.MAX_VALUE,
    minLines: Int = 1,
    interactionSource: MutableInteractionSource? = null,
    shape: Shape = TextFieldDefaults.OutlinedTextFieldShape,
    colors: TextFieldColors = TextFieldDefaults.outlinedTextFieldColors()
): Unit

Material Design outlined text field.

Outlined text field
image

If apart from input text change you also want to observe the cursor location, selection range, or IME composition use the OutlinedTextField overload with the TextFieldValue parameter instead.

Parameters
`value: String`	the input text to be shown in the text field
`onValueChange: (String) -> Unit`	the callback that is triggered when the input service updates the text. An updated text comes as a parameter of the callback
`modifier: Modifier = Modifier`	a `Modifier` for this text field
`enabled: Boolean = true`	controls the enabled state of the `OutlinedTextField`. 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: Boolean = false`	controls the editable state of the `OutlinedTextField`. 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
`textStyle: TextStyle = LocalTextStyle.current`	the style to be applied to the input text. The default `textStyle` uses the `LocalTextStyle` defined by the theme
`label: (@Composable () -> Unit)? = null`	the optional label to be displayed inside the text field container. The default text style for internal `Text` is `Typography.caption` when the text field is in focus and `Typography.subtitle1` when the text field is not in focus
`placeholder: (@Composable () -> Unit)? = null`	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 `Typography.subtitle1`
`leadingIcon: (@Composable () -> Unit)? = null`	the optional leading icon to be displayed at the beginning of the text field container
`trailingIcon: (@Composable () -> Unit)? = null`	the optional trailing icon to be displayed at the end of the text field container
`isError: Boolean = false`	indicates if the text field's current value is in error. If set to true, the label, bottom indicator and trailing icon by default will be displayed in error color
`visualTransformation: VisualTransformation = VisualTransformation.None`	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: KeyboardOptions = KeyboardOptions.Default`	software keyboard options that contains configuration such as `KeyboardType` and `ImeAction`
`keyboardActions: KeyboardActions = KeyboardActions.Default`	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`
`singleLine: Boolean = false`	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 `ImeAction`. Note that `maxLines` parameter will be ignored as the maxLines attribute will be automatically set to 1
`maxLines: Int = if (singleLine) 1 else Int.MAX_VALUE`	the maximum height in terms of maximum number of visible lines. It is required that 1 <= `minLines`<= `maxLines`. This parameter is ignored when `singleLine` is true.
`minLines: Int = 1`	the minimum height in terms of minimum number of visible lines. It is required that 1 <= `minLines`<= `maxLines`. This parameter is ignored when `singleLine` is true.
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this text field. You can use this to change the text field's appearance or preview the text field in different states. Note that if `null` is provided, interactions will still happen internally.
`shape: Shape = TextFieldDefaults.OutlinedTextFieldShape`	the shape of the text field's border
`colors: TextFieldColors = TextFieldDefaults.outlinedTextFieldColors()`	`TextFieldColors` that will be used to resolve color of the text and content (including label, placeholder, leading and trailing icons, border) for this text field in different states. See `TextFieldDefaults.outlinedTextFieldColors`

OutlinedTextField

Cmn

Artifact: androidx.compose.material:material

View Source

Added in 1.4.0

@Composable
fun OutlinedTextField(
    value: TextFieldValue,
    onValueChange: (TextFieldValue) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    readOnly: Boolean = false,
    textStyle: TextStyle = LocalTextStyle.current,
    label: (@Composable () -> Unit)? = null,
    placeholder: (@Composable () -> Unit)? = null,
    leadingIcon: (@Composable () -> Unit)? = null,
    trailingIcon: (@Composable () -> Unit)? = null,
    isError: Boolean = false,
    visualTransformation: VisualTransformation = VisualTransformation.None,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    keyboardActions: KeyboardActions = KeyboardActions(),
    singleLine: Boolean = false,
    maxLines: Int = if (singleLine) 1 else Int.MAX_VALUE,
    minLines: Int = 1,
    interactionSource: MutableInteractionSource? = null,
    shape: Shape = TextFieldDefaults.OutlinedTextFieldShape,
    colors: TextFieldColors = TextFieldDefaults.outlinedTextFieldColors()
): Unit

Material Design outlined text field.

Outlined text field
image

This overload provides access to the input text, cursor position and selection range and IME composition. If you only want to observe an input text change, use the OutlinedTextField overload with the String parameter instead.

Parameters
`value: TextFieldValue`	the input `TextFieldValue` to be shown in the text field
`onValueChange: (TextFieldValue) -> Unit`	the callback that is triggered when the input service updates values in `TextFieldValue`. An updated `TextFieldValue` comes as a parameter of the callback
`modifier: Modifier = Modifier`	a `Modifier` for this text field
`enabled: Boolean = true`	controls the enabled state of the `OutlinedTextField`. 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: Boolean = false`	controls the editable state of the `OutlinedTextField`. 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
`textStyle: TextStyle = LocalTextStyle.current`	the style to be applied to the input text. The default `textStyle` uses the `LocalTextStyle` defined by the theme
`label: (@Composable () -> Unit)? = null`	the optional label to be displayed inside the text field container. The default text style for internal `Text` is `Typography.caption` when the text field is in focus and `Typography.subtitle1` when the text field is not in focus
`placeholder: (@Composable () -> Unit)? = null`	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 `Typography.subtitle1`
`leadingIcon: (@Composable () -> Unit)? = null`	the optional leading icon to be displayed at the beginning of the text field container
`trailingIcon: (@Composable () -> Unit)? = null`	the optional trailing icon to be displayed at the end of the text field container
`isError: Boolean = false`	indicates if the text field's current value is in error state. If set to true, the label, bottom indicator and trailing icon by default will be displayed in error color
`visualTransformation: VisualTransformation = VisualTransformation.None`	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: KeyboardOptions = KeyboardOptions.Default`	software keyboard options that contains configuration such as `KeyboardType` and `ImeAction`
`keyboardActions: KeyboardActions = 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`
`singleLine: Boolean = false`	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 `ImeAction`. Note that `maxLines` parameter will be ignored as the maxLines attribute will be automatically set to 1
`maxLines: Int = if (singleLine) 1 else Int.MAX_VALUE`	the maximum height in terms of maximum number of visible lines. It is required that 1 <= `minLines`<= `maxLines`. This parameter is ignored when `singleLine` is true.
`minLines: Int = 1`	the minimum height in terms of minimum number of visible lines. It is required that 1 <= `minLines`<= `maxLines`. This parameter is ignored when `singleLine` is true.
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this text field. You can use this to change the text field's appearance or preview the text field in different states. Note that if `null` is provided, interactions will still happen internally.
`shape: Shape = TextFieldDefaults.OutlinedTextFieldShape`	the shape of the text field's border
`colors: TextFieldColors = TextFieldDefaults.outlinedTextFieldColors()`	`TextFieldColors` that will be used to resolve color of the text and content (including label, placeholder, leading and trailing icons, border) for this text field in different states. See `TextFieldDefaults.outlinedTextFieldColors`