{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

OutlinedTextFieldDefaults

public static class OutlinedTextFieldDefaults


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

Summary

Public fields

static @NonNull OutlinedTextFieldDefaults

Public methods

final void
@ExperimentalMaterial3Api
@Composable
ContainerBox(
    boolean enabled,
    boolean isError,
    @NonNull InteractionSource interactionSource,
    @NonNull TextFieldColors colors,
    @NonNull Shape shape,
    @NonNull Dp focusedBorderThickness,
    @NonNull Dp unfocusedBorderThickness
)

Composable that draws a default container for OutlinedTextField with a border stroke.

final void
@Composable
@ExperimentalMaterial3Api
DecorationBox(
    @NonNull String value,
    @Composable @NonNull Function0<Unit> innerTextField,
    boolean enabled,
    boolean singleLine,
    @NonNull VisualTransformation visualTransformation,
    @NonNull InteractionSource interactionSource,
    boolean isError,
    @Composable Function0<Unit> label,
    @Composable Function0<Unit> placeholder,
    @Composable Function0<Unit> leadingIcon,
    @Composable Function0<Unit> trailingIcon,
    @Composable Function0<Unit> prefix,
    @Composable Function0<Unit> suffix,
    @Composable Function0<Unit> supportingText,
    @NonNull TextFieldColors colors,
    @NonNull PaddingValues contentPadding,
    @Composable @NonNull Function0<Unit> container
)

A decoration box which helps creating custom text fields based on Material Design outlined text field.

final @NonNull TextFieldColors

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

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

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

final @NonNull PaddingValues
contentPadding(
    @NonNull Dp start,
    @NonNull Dp top,
    @NonNull Dp end,
    @NonNull Dp bottom
)

Default content padding applied to OutlinedTextField.

final @NonNull Dp

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

final @NonNull Dp

The default min height applied to an OutlinedTextField.

final @NonNull Dp

The default min width applied to an OutlinedTextField.

final @NonNull Shape

Default shape for an OutlinedTextField.

final @NonNull Dp

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

Public fields

INSTANCE

public static @NonNull OutlinedTextFieldDefaults INSTANCE

Public methods

ContainerBox

@ExperimentalMaterial3Api
@Composable
public final void ContainerBox(
    boolean enabled,
    boolean isError,
    @NonNull InteractionSource interactionSource,
    @NonNull TextFieldColors colors,
    @NonNull Shape shape,
    @NonNull Dp focusedBorderThickness,
    @NonNull Dp unfocusedBorderThickness
)

Composable that draws a default container for OutlinedTextField with a border stroke. You can use it to draw a border stroke in your custom text field based on OutlinedTextFieldDefaults.DecorationBox. The OutlinedTextField applies it automatically.

Parameters
boolean enabled

whether the text field is enabled

boolean isError

whether the text field's current value is in error

@NonNull InteractionSource interactionSource

the InteractionSource of this text field. Helps to determine if the text field is in focus or not

@NonNull TextFieldColors colors

TextFieldColors used to resolve colors of the text field

@NonNull Shape shape

shape of the container

@NonNull Dp focusedBorderThickness

thickness of the OutlinedTextField's border when it is in focused state

@NonNull Dp unfocusedBorderThickness

thickness of the OutlinedTextField's border when it is not in focused state

DecorationBox

@Composable
@ExperimentalMaterial3Api
public final void DecorationBox(
    @NonNull String value,
    @Composable @NonNull Function0<Unit> innerTextField,
    boolean enabled,
    boolean singleLine,
    @NonNull VisualTransformation visualTransformation,
    @NonNull InteractionSource interactionSource,
    boolean isError,
    @Composable Function0<Unit> label,
    @Composable Function0<Unit> placeholder,
    @Composable Function0<Unit> leadingIcon,
    @Composable Function0<Unit> trailingIcon,
    @Composable Function0<Unit> prefix,
    @Composable Function0<Unit> suffix,
    @Composable Function0<Unit> supportingText,
    @NonNull TextFieldColors colors,
    @NonNull PaddingValues contentPadding,
    @Composable @NonNull Function0<Unit> container
)

A decoration box which helps creating 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 need to create a dense outlined text field, use contentPadding parameter to decrease the paddings around the input field. If you need to change the thickness of the border, use container parameter to achieve that.

Example of custom text field based on OutlinedTextFieldDefaults.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.ContainerBox(
                    enabled = enabled,
                    isError = false,
                    colors = colors,
                    interactionSource = interactionSource,
                    shape = RectangleShape,
                    unfocusedBorderThickness = 2.dp,
                    focusedBorderThickness = 4.dp
                )
            },
        )
    }
}
Parameters
@NonNull String value

the input String shown by the text field

@Composable @NonNull Function0<Unit> innerTextField

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

boolean enabled

controls the enabled state of the text field. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. You must also pass the same value to the BasicTextField for it to adjust the behavior accordingly.

boolean singleLine

indicates if this is a single line or multi line text field. You must pass the same value as to BasicTextField.

@NonNull VisualTransformation visualTransformation

transforms the visual representation of the input value. You must pass the same value as to BasicTextField.

@NonNull 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.

boolean isError

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.

@Composable Function0<Unit> label

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.

@Composable Function0<Unit> 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 Typography.bodyLarge.

@Composable Function0<Unit> leadingIcon

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

@Composable Function0<Unit> trailingIcon

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

@Composable Function0<Unit> prefix

the optional prefix to be displayed before the input text in the text field

@Composable Function0<Unit> suffix

the optional suffix to be displayed after the input text in the text field

@Composable Function0<Unit> supportingText

the optional supporting text to be displayed below the text field

@NonNull TextFieldColors colors

TextFieldColors that will be used to resolve the colors used for this text field in different states. See OutlinedTextFieldDefaults.colors.

@NonNull PaddingValues contentPadding

the spacing values to apply internally between the internals of text field and the decoration box container. You can use it to implement dense text fields or simply to control horizontal padding. See OutlinedTextFieldDefaults.contentPadding.

@Composable @NonNull Function0<Unit> container

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. Note that by default the color of the border comes from the colors.

colors

@Composable
public final @NonNull TextFieldColors colors()

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

colors

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

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

Parameters
@NonNull Color focusedTextColor

the color used for the input text of this text field when focused

@NonNull Color unfocusedTextColor

the color used for the input text of this text field when not focused

@NonNull Color disabledTextColor

the color used for the input text of this text field when disabled

@NonNull Color errorTextColor

the color used for the input text of this text field when in error state

@NonNull Color focusedContainerColor

the container color for this text field when focused

@NonNull Color unfocusedContainerColor

the container color for this text field when not focused

@NonNull Color disabledContainerColor

the container color for this text field when disabled

@NonNull Color errorContainerColor

the container color for this text field when in error state

@NonNull Color cursorColor

the cursor color for this text field

@NonNull Color errorCursorColor

the cursor color for this text field when in error state

TextSelectionColors selectionColors

the colors used when the input text of this text field is selected

@NonNull Color focusedBorderColor

the border color for this text field when focused

@NonNull Color unfocusedBorderColor

the border color for this text field when not focused

@NonNull Color disabledBorderColor

the border color for this text field when disabled

@NonNull Color errorBorderColor

the border color for this text field when in error state

@NonNull Color focusedLeadingIconColor

the leading icon color for this text field when focused

@NonNull Color unfocusedLeadingIconColor

the leading icon color for this text field when not focused

@NonNull Color disabledLeadingIconColor

the leading icon color for this text field when disabled

@NonNull Color errorLeadingIconColor

the leading icon color for this text field when in error state

@NonNull Color focusedTrailingIconColor

the trailing icon color for this text field when focused

@NonNull Color unfocusedTrailingIconColor

the trailing icon color for this text field when not focused

@NonNull Color disabledTrailingIconColor

the trailing icon color for this text field when disabled

@NonNull Color errorTrailingIconColor

the trailing icon color for this text field when in error state

@NonNull Color focusedLabelColor

the label color for this text field when focused

@NonNull Color unfocusedLabelColor

the label color for this text field when not focused

@NonNull Color disabledLabelColor

the label color for this text field when disabled

@NonNull Color errorLabelColor

the label color for this text field when in error state

@NonNull Color focusedPlaceholderColor

the placeholder color for this text field when focused

@NonNull Color unfocusedPlaceholderColor

the placeholder color for this text field when not focused

@NonNull Color disabledPlaceholderColor

the placeholder color for this text field when disabled

@NonNull Color errorPlaceholderColor

the placeholder color for this text field when in error state

@NonNull Color focusedSupportingTextColor

the supporting text color for this text field when focused

@NonNull Color unfocusedSupportingTextColor

the supporting text color for this text field when not focused

@NonNull Color disabledSupportingTextColor

the supporting text color for this text field when disabled

@NonNull Color errorSupportingTextColor

the supporting text color for this text field when in error state

@NonNull Color focusedPrefixColor

the prefix color for this text field when focused

@NonNull Color unfocusedPrefixColor

the prefix color for this text field when not focused

@NonNull Color disabledPrefixColor

the prefix color for this text field when disabled

@NonNull Color errorPrefixColor

the prefix color for this text field when in error state

@NonNull Color focusedSuffixColor

the suffix color for this text field when focused

@NonNull Color unfocusedSuffixColor

the suffix color for this text field when not focused

@NonNull Color disabledSuffixColor

the suffix color for this text field when disabled

@NonNull Color errorSuffixColor

the suffix color for this text field when in error state

contentPadding

public final @NonNull PaddingValues contentPadding(
    @NonNull Dp start,
    @NonNull Dp top,
    @NonNull Dp end,
    @NonNull Dp bottom
)

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

getFocusedBorderThickness

public final @NonNull Dp getFocusedBorderThickness()

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

getMinHeight

public final @NonNull Dp getMinHeight()

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

getMinWidth

public final @NonNull Dp getMinWidth()

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

getShape

@Composable
public final @NonNull Shape getShape()

Default shape for an OutlinedTextField.

getUnfocusedBorderThickness

public final @NonNull Dp getUnfocusedBorderThickness()

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