Object

TextFieldDefaults

Contains the default values used by TextField and OutlinedTextField.

RevenueCat

RevenueCat

Add subscriptions to your apps in minutes

Ad Get started for free
Common
object TextFieldDefaults

Contains the default values used by TextField and OutlinedTextField.

Properties

Common
val MinHeight = 56.dp

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

Common
val MinWidth = 280.dp

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

Common
const val IconOpacity = 0.54f

The default opacity used for a TextField's and OutlinedTextField's leading and trailing icons color.

Common
val TextFieldShape: Shape

The default shape used for a TextField's background

Common
val OutlinedTextFieldShape: Shape

The default shape used for a OutlinedTextField's background and border

Common
val UnfocusedBorderThickness = 1.dp

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

Common
val FocusedBorderThickness = 2.dp

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

Common
const val BackgroundOpacity = 0.12f

The default opacity used for a TextField's background color.

Common
const val UnfocusedIndicatorLineOpacity = 0.42f

The default opacity used for a TextField's indicator line color when text field is not focused.

Functions

indicatorLine

fun Modifier.indicatorLine(
        enabled: Boolean,
        isError: Boolean,
        interactionSource: InteractionSource,
        colors: TextFieldColors,
        focusedIndicatorLineThickness: Dp = FocusedBorderThickness,
        unfocusedIndicatorLineThickness: Dp = UnfocusedBorderThickness,
    ) =
        composed(
            inspectorInfo =
                debugInspectorInfo {
                    name = "indicatorLine"
                    properties["enabled"] = enabled
                    properties["isError"] = isError
                    properties["interactionSource"] = interactionSource
                    properties["colors"] = colors
                    properties["focusedIndicatorLineThickness"] = focusedIndicatorLineThickness
                    properties["unfocusedIndicatorLineThickness"] = unfocusedIndicatorLineThickness
                }
        ) {
            val stroke =
                animateBorderStrokeAsState(
                    enabled = enabled,
                    isError = isError,
                    interactionSource = interactionSource,
                    colors = colors,
                    focusedBorderThickness = focusedIndicatorLineThickness,
                    unfocusedBorderThickness = unfocusedIndicatorLineThickness,
                )
            Modifier.drawIndicatorLine(stroke.value)
        }

A modifier to draw a default bottom indicator line for TextField. You can use this modifier if you build your custom text field using TextFieldDecorationBox. The TextField component applies it automatically.

Parameters
enabled whether the text field is enabled.
isError whether the text field's current value is in error.
interactionSource the InteractionSource of this text field. Used to determine if the text field is in focus or not.
colors TextFieldColors used to resolve colors of the text field.
focusedIndicatorLineThickness thickness of the indicator line when text field is focused.
unfocusedIndicatorLineThickness thickness of the indicator line when text field is not focused.

BorderBox

@Composable
    fun BorderBox(
        enabled: Boolean,
        isError: Boolean,
        interactionSource: InteractionSource,
        colors: TextFieldColors,
        shape: Shape = OutlinedTextFieldShape,
        focusedBorderThickness: Dp = FocusedBorderThickness,
        unfocusedBorderThickness: Dp = UnfocusedBorderThickness,
    )

Composable that draws a default border stroke in OutlinedTextField. You can use it to draw a border stroke in your custom text field based on OutlinedTextFieldDecorationBox. The OutlinedTextField component applies it automatically.

Parameters
enabled whether the text field is enabled.
isError whether the text field's current value is in error.
interactionSource the InteractionSource of this text field. Used to determine if the text field is in focus or not.
colors TextFieldColors used to resolve colors of the text field.
focusedBorderThickness thickness of the OutlinedTextField's border when it is in focused state.
unfocusedBorderThickness thickness of the OutlinedTextField's border when it is not in focused state.

textFieldWithLabelPadding

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

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

Note that when the label is present, the "top" padding (unlike rest of the paddings) is a distance between the label's last baseline and the top edge of the TextField. If the "top" value is smaller than the last baseline of the label, then there will be no space between the label and top edge of the TextField.

textFieldWithoutLabelPadding

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

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

outlinedTextFieldPadding

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

Default content padding applied to OutlinedTextField.

textFieldColors

@Composable
    fun textFieldColors(
        textColor: Color = LocalContentColor.current.copy(LocalContentAlpha.current),
        disabledTextColor: Color = textColor.copy(ContentAlpha.disabled),
        backgroundColor: Color = MaterialTheme.colors.onSurface.copy(alpha = BackgroundOpacity),
        cursorColor: Color = MaterialTheme.colors.primary,
        errorCursorColor: Color = MaterialTheme.colors.error,
        focusedIndicatorColor: Color = MaterialTheme.colors.primary.copy(alpha = ContentAlpha.high),
        unfocusedIndicatorColor: Color =
            MaterialTheme.colors.onSurface.copy(alpha = UnfocusedIndicatorLineOpacity),
        disabledIndicatorColor: Color = unfocusedIndicatorColor.copy(alpha = ContentAlpha.disabled),
        errorIndicatorColor: Color = MaterialTheme.colors.error,
        leadingIconColor: Color = MaterialTheme.colors.onSurface.copy(alpha = IconOpacity),
        disabledLeadingIconColor: Color = leadingIconColor.copy(alpha = ContentAlpha.disabled),
        errorLeadingIconColor: Color = leadingIconColor,
        trailingIconColor: Color = MaterialTheme.colors.onSurface.copy(alpha = IconOpacity),
        disabledTrailingIconColor: Color = trailingIconColor.copy(alpha = ContentAlpha.disabled),
        errorTrailingIconColor: Color = MaterialTheme.colors.error,
        focusedLabelColor: Color = MaterialTheme.colors.primary.copy(alpha = ContentAlpha.high),
        unfocusedLabelColor: Color = MaterialTheme.colors.onSurface.copy(ContentAlpha.medium),
        disabledLabelColor: Color = unfocusedLabelColor.copy(ContentAlpha.disabled),
        errorLabelColor: Color = MaterialTheme.colors.error,
        placeholderColor: Color = MaterialTheme.colors.onSurface.copy(ContentAlpha.medium),
        disabledPlaceholderColor: Color = placeholderColor.copy(ContentAlpha.disabled),
    ): TextFieldColors

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

outlinedTextFieldColors

@Composable
    fun outlinedTextFieldColors(
        textColor: Color = LocalContentColor.current.copy(LocalContentAlpha.current),
        disabledTextColor: Color = textColor.copy(ContentAlpha.disabled),
        backgroundColor: Color = Color.Transparent,
        cursorColor: Color = MaterialTheme.colors.primary,
        errorCursorColor: Color = MaterialTheme.colors.error,
        focusedBorderColor: Color = MaterialTheme.colors.primary.copy(alpha = ContentAlpha.high),
        unfocusedBorderColor: Color =
            MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled),
        disabledBorderColor: Color = unfocusedBorderColor.copy(alpha = ContentAlpha.disabled),
        errorBorderColor: Color = MaterialTheme.colors.error,
        leadingIconColor: Color = MaterialTheme.colors.onSurface.copy(alpha = IconOpacity),
        disabledLeadingIconColor: Color = leadingIconColor.copy(alpha = ContentAlpha.disabled),
        errorLeadingIconColor: Color = leadingIconColor,
        trailingIconColor: Color = MaterialTheme.colors.onSurface.copy(alpha = IconOpacity),
        disabledTrailingIconColor: Color = trailingIconColor.copy(alpha = ContentAlpha.disabled),
        errorTrailingIconColor: Color = MaterialTheme.colors.error,
        focusedLabelColor: Color = MaterialTheme.colors.primary.copy(alpha = ContentAlpha.high),
        unfocusedLabelColor: Color = MaterialTheme.colors.onSurface.copy(ContentAlpha.medium),
        disabledLabelColor: Color = unfocusedLabelColor.copy(ContentAlpha.disabled),
        errorLabelColor: Color = MaterialTheme.colors.error,
        placeholderColor: Color = MaterialTheme.colors.onSurface.copy(ContentAlpha.medium),
        disabledPlaceholderColor: Color = placeholderColor.copy(ContentAlpha.disabled),
    ): TextFieldColors

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

TextFieldDecorationBox

@Composable
    fun TextFieldDecorationBox(
        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,
        shape: Shape = TextFieldShape,
        colors: TextFieldColors = textFieldColors(),
        contentPadding: PaddingValues =
            if (label == null) {
                textFieldWithoutLabelPadding()
            } else {
                textFieldWithLabelPadding()
            },
    )

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 need to create a dense text field, use contentPadding parameter to decrease the paddings around the input field. If you need to customise the bottom indicator, apply indicatorLine modifier to achieve that.

Example of custom text field based on TextFieldDecorationBox:

Parameters
value the input String shown by the text field
innerTextField input text field that this decoration box wraps. Pass the framework-controlled composable parameter innerTextField from the decorationBox lambda of the BasicTextField.
enabled 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 indicates if this is a single line or multi line text field. This must be the same value that is passed to BasicTextField.
visualTransformation transforms the visual representation of the input value. This must be the same value that is passed to BasicTextField.
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 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 the optional label to be displayed inside the text field container. The default text style uses Typography.caption when the label is minimized and Typography.subtitle1 when the label is expanded.
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.subtitle1.
leadingIcon the optional leading icon to be displayed at the beginning of the text field container.
trailingIcon the optional trailing icon to be displayed at the end of the text field container.
shape the shape of the text field's container.
colors TextFieldColors that will be used to resolve the colors used for this text field decoration box in different states. See TextFieldDefaults.textFieldColors. Note: This parameter only affects the colors of elements in the decoration box. Elements of the BasicTextField (such as text color or cursor color) are unaffected and must be changed using the relevant parameters of BasicTextField.
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. Note that the padding values may not be respected if they are incompatible with the text field's size constraints or layout. See TextFieldDefaults.textFieldWithLabelPadding and TextFieldDefaults.textFieldWithoutLabelPadding.

OutlinedTextFieldDecorationBox

@Composable
    fun OutlinedTextFieldDecorationBox(
        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,
        shape: Shape = OutlinedTextFieldShape,
        colors: TextFieldColors = outlinedTextFieldColors(),
        contentPadding: PaddingValues = outlinedTextFieldPadding(),
        border: @Composable () -> Unit = {
            BorderBox(enabled, isError, interactionSource, colors, shape)
        },
    )

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 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 border parameter to achieve that.

Example of custom text field based on OutlinedTextFieldDecorationBox:

Parameters
value the input String shown by the text field
innerTextField input text field that this decoration box wraps. Pass the framework-controlled composable parameter innerTextField from the decorationBox lambda of the BasicTextField.
enabled 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 indicates if this is a single line or multi line text field. This must be the same value that is passed to BasicTextField.
visualTransformation transforms the visual representation of the input value. This must be the same value that is passed to BasicTextField.
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 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 the optional label to be displayed inside the text field container. The default text style uses Typography.caption when the label is minimized and Typography.subtitle1 when the label is expanded.
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.subtitle1.
leadingIcon the optional leading icon to be displayed at the beginning of the text field container.
trailingIcon the optional trailing icon to be displayed at the end of the text field container.
shape the shape of the text field's container and border.
colors TextFieldColors that will be used to resolve the colors used for this text field decoration box in different states. See TextFieldDefaults.outlinedTextFieldColors. Note: This parameter only affects the colors of elements in the decoration box. Elements of the BasicTextField (such as text color or cursor color) are unaffected and must be changed using the relevant parameters of BasicTextField.
border the border to be drawn around the text field. The cutout to fit the label will be automatically added by the framework. Note that by default the color of the border comes from the colors.
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. Note that the padding values may not be respected if they are incompatible with the text field's size constraints or layout. See TextFieldDefaults.outlinedTextFieldPadding.

TextFieldDecorationBox

@Composable
    @ExperimentalMaterialApi
    fun TextFieldDecorationBox(
        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,
        colors: TextFieldColors = textFieldColors(),
        contentPadding: PaddingValues =
            if (label == null) {
                textFieldWithoutLabelPadding()
            } else {
                textFieldWithLabelPadding()
            },
    ) =
        TextFieldDecorationBox(
            value = value,
            innerTextField = innerTextField,
            enabled = enabled,
            singleLine = singleLine,
            visualTransformation = visualTransformation,
            interactionSource = interactionSource,
            isError = isError,
            label = label,
            placeholder = placeholder,
            leadingIcon = leadingIcon,
            trailingIcon = trailingIcon,
            shape = TextFieldShape,
            colors = colors,
            contentPadding = contentPadding,
        )

OutlinedTextFieldDecorationBox

@Composable
    @ExperimentalMaterialApi
    fun OutlinedTextFieldDecorationBox(
        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,
        colors: TextFieldColors = outlinedTextFieldColors(),
        contentPadding: PaddingValues = outlinedTextFieldPadding(),
        border: @Composable () -> Unit = { BorderBox(enabled, isError, interactionSource, colors) },
    ) =
        OutlinedTextFieldDecorationBox(
            value = value,
            innerTextField = innerTextField,
            enabled = enabled,
            singleLine = singleLine,
            visualTransformation = visualTransformation,
            interactionSource = interactionSource,
            isError = isError,
            label = label,
            placeholder = placeholder,
            leadingIcon = leadingIcon,
            trailingIcon = trailingIcon,
            shape = OutlinedTextFieldShape,
            colors = colors,
            contentPadding = contentPadding,
            border = border,
        )