TextFieldDefaults

@ExperimentalMaterial3Api
@Composable
fun Container(
    enabled: Boolean,
    isError: Boolean,
    interactionSource: InteractionSource,
    modifier: Modifier = Modifier,
    colors: TextFieldColors = colors(),
    shape: Shape = TextFieldDefaults.shape,
    focusedIndicatorLineThickness: Dp = FocusedIndicatorThickness,
    unfocusedIndicatorLineThickness: Dp = UnfocusedIndicatorThickness
): Unit

Composable that draws a default container for a TextField with an indicator line at the bottom. You can apply it to a BasicTextField using DecorationBox to create a custom text field based on the styling of a Material filled text field. The TextField component applies it automatically.

@ExperimentalMaterial3Api
@Composable
fun ContainerBox(
    enabled: Boolean,
    isError: Boolean,
    interactionSource: InteractionSource,
    colors: TextFieldColors,
    shape: Shape = TextFieldDefaults.shape
): Unit

@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,
    shape: Shape = TextFieldDefaults.shape,
    colors: TextFieldColors = colors(),
    contentPadding: PaddingValues = if (label == null) {
                contentPaddingWithoutLabel()
            } else {
                contentPaddingWithLabel()
            },
    container: @Composable () -> Unit = {
            Container(
                enabled = enabled,
                isError = isError,
                interactionSource = interactionSource,
                modifier = Modifier,
                colors = colors,
                shape = shape,
                focusedIndicatorLineThickness = FocusedIndicatorThickness,
                unfocusedIndicatorLineThickness = UnfocusedIndicatorThickness,
            )
        }
): Unit

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

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

For example, if you wish to customise the bottom indicator line, 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.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.text.input.PasswordVisualTransformation
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 passwordTransformation = PasswordVisualTransformation()

    BasicTextField(
        value = value,
        onValueChange = onValueChange,
        modifier = modifier,
        visualTransformation = passwordTransformation,
        // internal implementation of the BasicTextField will dispatch focus events
        interactionSource = interactionSource,
        enabled = enabled,
        singleLine = singleLine
    ) {
        TextFieldDefaults.DecorationBox(
            value = value,
            visualTransformation = passwordTransformation,
            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 = TextFieldDefaults.contentPaddingWithoutLabel(
                top = 8.dp, bottom = 8.dp
            ),
        )
    }
}

@Composable
fun colors(): TextFieldColors

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

@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,
    focusedIndicatorColor: Color = Color.Unspecified,
    unfocusedIndicatorColor: Color = Color.Unspecified,
    disabledIndicatorColor: Color = Color.Unspecified,
    errorIndicatorColor: 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 a TextField.

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

Default content padding applied to TextField when there is a label.

The top padding represents ths distance between the top edge of the TextField and the top of the label in the focused state. The input field is placed directly beneath the label.

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

Default content padding applied to TextField when the label is null.

@ExperimentalMaterial3Api
fun Modifier.indicatorLine(
    enabled: Boolean,
    isError: Boolean,
    interactionSource: InteractionSource,
    colors: TextFieldColors,
    focusedIndicatorLineThickness: Dp = FocusedIndicatorThickness,
    unfocusedIndicatorLineThickness: Dp = UnfocusedIndicatorThickness
): Modifier

A modifier to draw a default bottom indicator line for TextField. You can apply it to a BasicTextField or to DecorationBox to create a custom text field based on the styling of a Material filled text field.

Consider using Container, which automatically applies this modifier as well as other text field container styling.

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

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

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

val FocusedBorderThickness: Dp

val FocusedIndicatorThickness: Dp

The default thickness of the indicator line in TextField in focused state.

val MinHeight: Dp

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

val MinWidth: Dp

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

val UnfocusedBorderThickness: Dp

val UnfocusedIndicatorThickness: Dp

The default thickness of the indicator line in TextField in unfocused state.

val filledShape: Shape

val outlinedShape: Shape

val shape: Shape

Default shape for a TextField.