OutlinedTextFieldDefaults

Artifact: androidx.compose.material3:material3

View Source

Added in 1.1.0

---

Kotlin |Java

Common/AllAndroid/JVM

• Cmn

  object OutlinedTextFieldDefaults

---

Contains the default values used by OutlinedTextField. For defaults used in TextField, see TextFieldDefaults.

Summary

Public functions
Unit	@ExperimentalMaterial3Api @Composable Container(     enabled: Boolean,     isError: Boolean,     interactionSource: InteractionSource,     modifier: Modifier,     colors: TextFieldColors,     shape: Shape,     focusedBorderThickness: Dp,     unfocusedBorderThickness: Dp ) Composable that draws a default container for an OutlinedTextField with a border stroke.	Cmn
Unit	@ExperimentalMaterial3Api @Composable ContainerBox(     enabled: Boolean,     isError: Boolean,     interactionSource: InteractionSource,     colors: TextFieldColors,     shape: Shape,     focusedBorderThickness: Dp,     unfocusedBorderThickness: Dp ) This function is deprecated. Renamed to OutlinedTextFieldDefaults.Container	Cmn
Unit	@Composable @ExperimentalMaterial3Api DecorationBox(     value: String,     innerTextField: @Composable () -> Unit,     enabled: Boolean,     singleLine: Boolean,     visualTransformation: VisualTransformation,     interactionSource: InteractionSource,     isError: Boolean,     label: (@Composable () -> Unit)?,     placeholder: (@Composable () -> Unit)?,     leadingIcon: (@Composable () -> Unit)?,     trailingIcon: (@Composable () -> Unit)?,     prefix: (@Composable () -> Unit)?,     suffix: (@Composable () -> Unit)?,     supportingText: (@Composable () -> Unit)?,     colors: TextFieldColors,     contentPadding: PaddingValues,     container: @Composable () -> Unit ) A decoration box used to create custom text fields based on Material Design outlined text field.	Cmn
TextFieldColors	@Composable colors() Creates a TextFieldColors that represents the default input text, container, and content colors (including label, placeholder, icons, etc.) used in an OutlinedTextField.	Cmn
TextFieldColors	@Composable colors(     focusedTextColor: Color,     unfocusedTextColor: Color,     disabledTextColor: Color,     errorTextColor: Color,     focusedContainerColor: Color,     unfocusedContainerColor: Color,     disabledContainerColor: Color,     errorContainerColor: Color,     cursorColor: Color,     errorCursorColor: Color,     selectionColors: TextSelectionColors?,     focusedBorderColor: Color,     unfocusedBorderColor: Color,     disabledBorderColor: Color,     errorBorderColor: Color,     focusedLeadingIconColor: Color,     unfocusedLeadingIconColor: Color,     disabledLeadingIconColor: Color,     errorLeadingIconColor: Color,     focusedTrailingIconColor: Color,     unfocusedTrailingIconColor: Color,     disabledTrailingIconColor: Color,     errorTrailingIconColor: Color,     focusedLabelColor: Color,     unfocusedLabelColor: Color,     disabledLabelColor: Color,     errorLabelColor: Color,     focusedPlaceholderColor: Color,     unfocusedPlaceholderColor: Color,     disabledPlaceholderColor: Color,     errorPlaceholderColor: Color,     focusedSupportingTextColor: Color,     unfocusedSupportingTextColor: Color,     disabledSupportingTextColor: Color,     errorSupportingTextColor: Color,     focusedPrefixColor: Color,     unfocusedPrefixColor: Color,     disabledPrefixColor: Color,     errorPrefixColor: Color,     focusedSuffixColor: Color,     unfocusedSuffixColor: Color,     disabledSuffixColor: Color,     errorSuffixColor: Color ) Creates a TextFieldColors that represents the default input text, container, and content colors (including label, placeholder, icons, etc.) used in an OutlinedTextField.	Cmn
PaddingValues	contentPadding(start: Dp, top: Dp, end: Dp, bottom: Dp) Default content padding applied to OutlinedTextField.	Cmn

Public properties
Dp	FocusedBorderThickness The default thickness of the border in OutlinedTextField in focused state.	Cmn
Dp	MinHeight The default min height applied to an OutlinedTextField.	Cmn
Dp	MinWidth The default min width applied to an OutlinedTextField.	Cmn
Dp	UnfocusedBorderThickness The default thickness of the border in OutlinedTextField in unfocused state.	Cmn
Shape	shape Default shape for an OutlinedTextField.	Cmn

Public functions

Container

Cmn

@ExperimentalMaterial3Api
@Composable
fun Container(
    enabled: Boolean,
    isError: Boolean,
    interactionSource: InteractionSource,
    modifier: Modifier = Modifier,
    colors: TextFieldColors = colors(),
    shape: Shape = OutlinedTextFieldDefaults.shape,
    focusedBorderThickness: Dp = FocusedBorderThickness,
    unfocusedBorderThickness: Dp = UnfocusedBorderThickness
): Unit

Composable that draws a default container for an OutlinedTextField with a border stroke. You can apply it to a BasicTextField using DecorationBox to create a custom text field based on the styling of a Material outlined text field. The OutlinedTextField component applies it automatically.

Parameters
enabled: Boolean	whether the text field is enabled
isError: Boolean	whether the text field's current value is in error
interactionSource: InteractionSource	the InteractionSource of the text field. Used to determine if the text field is in focus or not
modifier: Modifier = Modifier	the Modifier of this container
colors: TextFieldColors = colors()	TextFieldColors used to resolve colors of the text field
shape: Shape = OutlinedTextFieldDefaults.shape	the shape of this container
focusedBorderThickness: Dp = FocusedBorderThickness	thickness of the border when the text field is focused
unfocusedBorderThickness: Dp = UnfocusedBorderThickness	thickness of the border when the text field is not focused

ContainerBox

Cmn

@ExperimentalMaterial3Api
@Composable
fun ContainerBox(
    enabled: Boolean,
    isError: Boolean,
    interactionSource: InteractionSource,
    colors: TextFieldColors = colors(),
    shape: Shape = OutlinedTextFieldDefaults.shape,
    focusedBorderThickness: Dp = FocusedBorderThickness,
    unfocusedBorderThickness: Dp = UnfocusedBorderThickness
): Unit

This function is deprecated.
Renamed to OutlinedTextFieldDefaults.Container

DecorationBox

Cmn

Added in 1.1.0

@Composable
@ExperimentalMaterial3Api
fun DecorationBox(
    value: String,
    innerTextField: @Composable () -> Unit,
    enabled: Boolean,
    singleLine: Boolean,
    visualTransformation: VisualTransformation,
    interactionSource: InteractionSource,
    isError: Boolean = false,
    label: (@Composable () -> Unit)? = null,
    placeholder: (@Composable () -> Unit)? = null,
    leadingIcon: (@Composable () -> Unit)? = null,
    trailingIcon: (@Composable () -> Unit)? = null,
    prefix: (@Composable () -> Unit)? = null,
    suffix: (@Composable () -> Unit)? = null,
    supportingText: (@Composable () -> Unit)? = null,
    colors: TextFieldColors = colors(),
    contentPadding: PaddingValues = contentPadding(),
    container: @Composable () -> Unit = {
            Container(
                enabled = enabled,
                isError = isError,
                interactionSource = interactionSource,
                modifier = Modifier,
                colors = colors,
                shape = shape,
                focusedBorderThickness = FocusedBorderThickness,
                unfocusedBorderThickness = UnfocusedBorderThickness,
            )
        }
): Unit

A decoration box used to create custom text fields based on Material Design outlined text field.

If your text field requires customising elements that aren't exposed by OutlinedTextField, consider using this decoration box to achieve the desired design.

For example, if you wish to customize the thickness of the border, you can pass a custom Container to this decoration box's container.

An example of building a custom text field using DecorationBox:

import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.OutlinedTextFieldDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.unit.dp

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CustomTextField(
    value: String,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier
) {
    val interactionSource = remember { MutableInteractionSource() }
    // parameters below will be passed to BasicTextField for correct behavior of the text field,
    // and to the decoration box for proper styling and sizing
    val enabled = true
    val singleLine = true

    val colors = OutlinedTextFieldDefaults.colors(
        unfocusedBorderColor = Color.LightGray,
        focusedBorderColor = Color.DarkGray
    )
    BasicTextField(
        value = value,
        onValueChange = onValueChange,
        modifier = modifier,
        // internal implementation of the BasicTextField will dispatch focus events
        interactionSource = interactionSource,
        enabled = enabled,
        singleLine = singleLine
    ) {
        OutlinedTextFieldDefaults.DecorationBox(
            value = value,
            visualTransformation = VisualTransformation.None,
            innerTextField = it,
            singleLine = singleLine,
            enabled = enabled,
            // same interaction source as the one passed to BasicTextField to read focus state
            // for text field styling
            interactionSource = interactionSource,
            supportingText = { Text("Supporting text") },
            // keep horizontal paddings but change the vertical
            contentPadding = OutlinedTextFieldDefaults.contentPadding(
                top = 8.dp, bottom = 8.dp
            ),
            // update border colors
            colors = colors,
            // update border thickness and shape
            container = {
                OutlinedTextFieldDefaults.Container(
                    enabled = enabled,
                    isError = false,
                    colors = colors,
                    interactionSource = interactionSource,
                    shape = RectangleShape,
                    unfocusedBorderThickness = 2.dp,
                    focusedBorderThickness = 4.dp
                )
            },
        )
    }
}

Parameters
value: String	the input String shown by the text field
innerTextField: @Composable () -> Unit	input text field that this decoration box wraps. You will pass here a framework-controlled composable parameter "innerTextField" from the decorationBox lambda of the BasicTextField
enabled: Boolean	the enabled state of the text field. When false, this decoration box will appear visually disabled. This must be the same value that is passed to BasicTextField.
singleLine: Boolean	indicates if this is a single line or multi line text field. This must be the same value that is passed to BasicTextField.
visualTransformation: VisualTransformation	transforms the visual representation of the input value. This must be the same value that is passed to BasicTextField.
interactionSource: InteractionSource	the read-only InteractionSource representing the stream of Interactions for this text field. You must first create and pass in your own remembered MutableInteractionSource instance to the BasicTextField for it to dispatch events. And then pass the same instance to this decoration box to observe Interactions and customize the appearance / behavior of this text field in different states.
isError: Boolean = false	indicates if the text field's current value is in an error state. When true, this decoration box will display its contents in an error color.
label: (@Composable () -> Unit)? = null	the optional label to be displayed inside the text field container. The default text style for internal Text is Typography.bodySmall when the text field is in focus and Typography.bodyLarge 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.bodyLarge.
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
prefix: (@Composable () -> Unit)? = null	the optional prefix to be displayed before the input text in the text field
suffix: (@Composable () -> Unit)? = null	the optional suffix to be displayed after the input text in the text field
supportingText: (@Composable () -> Unit)? = null	the optional supporting text to be displayed below the text field
colors: TextFieldColors = colors()	TextFieldColors that will be used to resolve the colors used for this text field in different states. See OutlinedTextFieldDefaults.colors.
contentPadding: PaddingValues = contentPadding()	the padding applied between the internal elements of this decoration box and the edge of its container
container: @Composable () -> Unit = { Container( enabled = enabled, isError = isError, interactionSource = interactionSource, modifier = Modifier, colors = colors, shape = shape, focusedBorderThickness = FocusedBorderThickness, unfocusedBorderThickness = UnfocusedBorderThickness, ) }	the container to be drawn behind the text field. By default, this is transparent and only includes a border. The cutout in the border to fit the label will be automatically added by the framework. Default colors for the container come from the colors.

colors

Cmn

Added in 1.2.0

@Composable
fun colors(): TextFieldColors

Creates a TextFieldColors that represents the default input text, container, and content colors (including label, placeholder, icons, etc.) used in an OutlinedTextField.

colors

Cmn

@Composable
fun colors(
    focusedTextColor: Color = Color.Unspecified,
    unfocusedTextColor: Color = Color.Unspecified,
    disabledTextColor: Color = Color.Unspecified,
    errorTextColor: Color = Color.Unspecified,
    focusedContainerColor: Color = Color.Unspecified,
    unfocusedContainerColor: Color = Color.Unspecified,
    disabledContainerColor: Color = Color.Unspecified,
    errorContainerColor: Color = Color.Unspecified,
    cursorColor: Color = Color.Unspecified,
    errorCursorColor: Color = Color.Unspecified,
    selectionColors: TextSelectionColors? = null,
    focusedBorderColor: Color = Color.Unspecified,
    unfocusedBorderColor: Color = Color.Unspecified,
    disabledBorderColor: Color = Color.Unspecified,
    errorBorderColor: Color = Color.Unspecified,
    focusedLeadingIconColor: Color = Color.Unspecified,
    unfocusedLeadingIconColor: Color = Color.Unspecified,
    disabledLeadingIconColor: Color = Color.Unspecified,
    errorLeadingIconColor: Color = Color.Unspecified,
    focusedTrailingIconColor: Color = Color.Unspecified,
    unfocusedTrailingIconColor: Color = Color.Unspecified,
    disabledTrailingIconColor: Color = Color.Unspecified,
    errorTrailingIconColor: Color = Color.Unspecified,
    focusedLabelColor: Color = Color.Unspecified,
    unfocusedLabelColor: Color = Color.Unspecified,
    disabledLabelColor: Color = Color.Unspecified,
    errorLabelColor: Color = Color.Unspecified,
    focusedPlaceholderColor: Color = Color.Unspecified,
    unfocusedPlaceholderColor: Color = Color.Unspecified,
    disabledPlaceholderColor: Color = Color.Unspecified,
    errorPlaceholderColor: Color = Color.Unspecified,
    focusedSupportingTextColor: Color = Color.Unspecified,
    unfocusedSupportingTextColor: Color = Color.Unspecified,
    disabledSupportingTextColor: Color = Color.Unspecified,
    errorSupportingTextColor: Color = Color.Unspecified,
    focusedPrefixColor: Color = Color.Unspecified,
    unfocusedPrefixColor: Color = Color.Unspecified,
    disabledPrefixColor: Color = Color.Unspecified,
    errorPrefixColor: Color = Color.Unspecified,
    focusedSuffixColor: Color = Color.Unspecified,
    unfocusedSuffixColor: Color = Color.Unspecified,
    disabledSuffixColor: Color = Color.Unspecified,
    errorSuffixColor: Color = Color.Unspecified
): TextFieldColors

Creates a TextFieldColors that represents the default input text, container, and content colors (including label, placeholder, icons, etc.) used in an OutlinedTextField.

Parameters
focusedTextColor: Color = Color.Unspecified	the color used for the input text of this text field when focused
unfocusedTextColor: Color = Color.Unspecified	the color used for the input text of this text field when not focused
disabledTextColor: Color = Color.Unspecified	the color used for the input text of this text field when disabled
errorTextColor: Color = Color.Unspecified	the color used for the input text of this text field when in error state
focusedContainerColor: Color = Color.Unspecified	the container color for this text field when focused
unfocusedContainerColor: Color = Color.Unspecified	the container color for this text field when not focused
disabledContainerColor: Color = Color.Unspecified	the container color for this text field when disabled
errorContainerColor: Color = Color.Unspecified	the container color for this text field when in error state
cursorColor: Color = Color.Unspecified	the cursor color for this text field
errorCursorColor: Color = Color.Unspecified	the cursor color for this text field when in error state
selectionColors: TextSelectionColors? = null	the colors used when the input text of this text field is selected
focusedBorderColor: Color = Color.Unspecified	the border color for this text field when focused
unfocusedBorderColor: Color = Color.Unspecified	the border color for this text field when not focused
disabledBorderColor: Color = Color.Unspecified	the border color for this text field when disabled
errorBorderColor: Color = Color.Unspecified	the border color for this text field when in error state
focusedLeadingIconColor: Color = Color.Unspecified	the leading icon color for this text field when focused
unfocusedLeadingIconColor: Color = Color.Unspecified	the leading icon color for this text field when not focused
disabledLeadingIconColor: Color = Color.Unspecified	the leading icon color for this text field when disabled
errorLeadingIconColor: Color = Color.Unspecified	the leading icon color for this text field when in error state
focusedTrailingIconColor: Color = Color.Unspecified	the trailing icon color for this text field when focused
unfocusedTrailingIconColor: Color = Color.Unspecified	the trailing icon color for this text field when not focused
disabledTrailingIconColor: Color = Color.Unspecified	the trailing icon color for this text field when disabled
errorTrailingIconColor: Color = Color.Unspecified	the trailing icon color for this text field when in error state
focusedLabelColor: Color = Color.Unspecified	the label color for this text field when focused
unfocusedLabelColor: Color = Color.Unspecified	the label color for this text field when not focused
disabledLabelColor: Color = Color.Unspecified	the label color for this text field when disabled
errorLabelColor: Color = Color.Unspecified	the label color for this text field when in error state
focusedPlaceholderColor: Color = Color.Unspecified	the placeholder color for this text field when focused
unfocusedPlaceholderColor: Color = Color.Unspecified	the placeholder color for this text field when not focused
disabledPlaceholderColor: Color = Color.Unspecified	the placeholder color for this text field when disabled
errorPlaceholderColor: Color = Color.Unspecified	the placeholder color for this text field when in error state
focusedSupportingTextColor: Color = Color.Unspecified	the supporting text color for this text field when focused
unfocusedSupportingTextColor: Color = Color.Unspecified	the supporting text color for this text field when not focused
disabledSupportingTextColor: Color = Color.Unspecified	the supporting text color for this text field when disabled
errorSupportingTextColor: Color = Color.Unspecified	the supporting text color for this text field when in error state
focusedPrefixColor: Color = Color.Unspecified	the prefix color for this text field when focused
unfocusedPrefixColor: Color = Color.Unspecified	the prefix color for this text field when not focused
disabledPrefixColor: Color = Color.Unspecified	the prefix color for this text field when disabled
errorPrefixColor: Color = Color.Unspecified	the prefix color for this text field when in error state
focusedSuffixColor: Color = Color.Unspecified	the suffix color for this text field when focused
unfocusedSuffixColor: Color = Color.Unspecified	the suffix color for this text field when not focused
disabledSuffixColor: Color = Color.Unspecified	the suffix color for this text field when disabled
errorSuffixColor: Color = Color.Unspecified	the suffix color for this text field when in error state

contentPadding

Cmn

fun contentPadding(
    start: Dp = TextFieldPadding,
    top: Dp = TextFieldPadding,
    end: Dp = TextFieldPadding,
    bottom: Dp = TextFieldPadding
): PaddingValues

Default content padding applied to OutlinedTextField. See PaddingValues for more details.

Public properties

FocusedBorderThickness

Cmn

Added in 1.1.0

val FocusedBorderThickness: Dp

The default thickness of the border in OutlinedTextField in focused state.

MinHeight

Cmn

Added in 1.1.0

val MinHeight: Dp

The default min height applied to an OutlinedTextField. Note that you can override it by applying Modifier.heightIn directly on a text field.

MinWidth

Cmn

Added in 1.1.0

val MinWidth: Dp

The default min width applied to an OutlinedTextField. Note that you can override it by applying Modifier.widthIn directly on a text field.

UnfocusedBorderThickness

Cmn

Added in 1.1.0

val UnfocusedBorderThickness: Dp

The default thickness of the border in OutlinedTextField in unfocused state.

shape

Cmn

Added in 1.1.0

val shape: Shape

Default shape for an OutlinedTextField.