OutlinedTextFieldDefaults

object OutlinedTextFieldDefaults

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

Properties

val shape: Shape

Default shape for an OutlinedTextField.

val MinHeight = 56.dp

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

val MinWidth = 280.dp

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

val UnfocusedBorderThickness = 1.dp

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

val FocusedBorderThickness = 2.dp

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

Functions

decorator

@Composable
    fun decorator(
        state: TextFieldState,
        enabled: Boolean,
        lineLimits: TextFieldLineLimits,
        outputTransformation: OutputTransformation?,
        interactionSource: InteractionSource,
        labelPosition: TextFieldLabelPosition = TextFieldLabelPosition.Attached(),
        label: @Composable (TextFieldLabelScope.() -> 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,
        isError: Boolean = false,
        colors: TextFieldColors = colors(),
        contentPadding: PaddingValues = contentPadding(),
        container: @Composable () -> Unit = {
            Container(
                enabled = enabled,
                isError = isError,
                interactionSource = interactionSource,
                colors = colors,
                shape = shape,
                focusedBorderThickness = FocusedBorderThickness,
                unfocusedBorderThickness = UnfocusedBorderThickness,
            )
        },
    ): TextFieldDecorator

A decorator 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, such as the border thickness, consider using this decorator 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.

This decorator is meant to be used in conjunction with the overload of BasicTextField that accepts a TextFieldDecorator parameter. For other overloads of BasicTextField that use a decorationBox, see DecorationBox.

An example of building a custom text field using decorator:

Parameters

Container

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

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

Parameters

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.

This decoration box is meant to be used in conjunction with overloads of BasicTextField that accept a decorationBox parameter. For other overloads of BasicTextField that use a TextFieldDecorator, see decorator.

An example of building a custom text field using DecorationBox:

Parameters

contentPadding

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

Default content padding of the input field within the OutlinedTextField.

Horizontal padding represents the distance between the input field and the leading/trailing icons (if present) or the horizontal edges of the container if there are no icons.

@Composable fun colors() = MaterialTheme.colorScheme.defaultOutlinedTextFieldColors

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

colors

@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

ContainerBox

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