Compose Multiplatform Material3/androidx.compose.material3/OutlinedTextFieldDefaults/DecorationBox

DecorationBox

@Composable
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, ) })

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:

Parameters

value

the input String shown by the text field

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

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 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

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

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

prefix

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

suffix

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

supportingText

the optional supporting text to be displayed below the text field

colors

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

contentPadding

the padding applied between the internal elements of this decoration box and the edge of its container

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. Default colors for the container come from the colors.

Samples

androidx.compose.material3.samples.CustomOutlinedTextFieldBasedOnDecorationBox