commonMain.androidx.compose.material.TextFieldDefaults.kt Maven / Gradle / Ivy
/*
* Copyright 2023 The Android Open Source Project
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package androidx.compose.material
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.border
import androidx.compose.foundation.interaction.Interaction
import androidx.compose.foundation.interaction.InteractionSource
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsFocusedAsState
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.shape.ZeroCornerSize
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material.TextFieldDefaults.OutlinedTextFieldDecorationBox
import androidx.compose.material.internal.JvmDefaultWithCompatibility
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.composed
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.layout.LastBaseline
import androidx.compose.ui.platform.debugInspectorInfo
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
/**
* Represents the colors of the input text, background and content (including label, placeholder,
* leading and trailing icons) used in a text field in different states.
*
* See [TextFieldDefaults.textFieldColors] for the default colors used in [TextField].
* See [TextFieldDefaults.outlinedTextFieldColors] for the default colors used in
* [OutlinedTextField].
*/
@Stable
interface TextFieldColors {
/**
* Represents the color used for the input text of this text field.
*
* @param enabled whether the text field is enabled
*/
@Composable
fun textColor(enabled: Boolean): State
/**
* Represents the background color for this text field.
*
* @param enabled whether the text field is enabled
*/
@Composable
fun backgroundColor(enabled: Boolean): State
/**
* Represents the color used for the placeholder of this text field.
*
* @param enabled whether the text field is enabled
*/
@Composable
fun placeholderColor(enabled: Boolean): State
/**
* Represents the color used for the label of this text field.
*
* @param enabled whether the text field is enabled
* @param error whether the text field should show error color according to the Material
* specifications. If the label is being used as a placeholder, this will be false even if
* the input is invalid, as the placeholder should not use the error color
* @param interactionSource the [InteractionSource] of this text field. Helps to determine if
* the text field is in focus or not
*/
@Composable
fun labelColor(
enabled: Boolean,
error: Boolean,
interactionSource: InteractionSource
): State
/**
* Represents the color used for the leading icon of this text field.
*
* @param enabled whether the text field is enabled
* @param isError whether the text field's current value is in error
*/
@Deprecated(
message = "Use/implement overload with interactionSource parameter",
replaceWith = ReplaceWith("leadingIconColor(enabled, isError, interactionSource)"),
level = DeprecationLevel.WARNING,
)
@Composable
fun leadingIconColor(enabled: Boolean, isError: Boolean): State
/**
* Represents the color used for the leading icon of this text field.
*
* @param enabled whether the text field is enabled
* @param isError whether the text field's current value is in error
* @param interactionSource the [InteractionSource] of this text field. Helps to determine if
* the text field is in focus or not
*/
@Composable
fun leadingIconColor(
enabled: Boolean,
isError: Boolean,
interactionSource: InteractionSource
): State {
@Suppress("DEPRECATION")
return leadingIconColor(enabled, isError)
}
/**
* Represents the color used for the trailing icon of this text field.
*
* @param enabled whether the text field is enabled
* @param isError whether the text field's current value is in error
*/
@Deprecated(
message = "Use/implement overload with interactionSource parameter",
replaceWith = ReplaceWith(
"trailingIconColor(enabled, isError, interactionSource)"),
level = DeprecationLevel.WARNING,
)
@Composable
fun trailingIconColor(enabled: Boolean, isError: Boolean): State
/**
* Represents the color used for the trailing icon of this text field.
*
* @param enabled whether the text field is enabled
* @param isError whether the text field's current value is in error
* @param interactionSource the [InteractionSource] of this text field. Helps to determine if
* the text field is in focus or not
*/
@Composable
fun trailingIconColor(
enabled: Boolean,
isError: Boolean,
interactionSource: InteractionSource
): State {
@Suppress("DEPRECATION")
return trailingIconColor(enabled, isError)
}
/**
* Represents the color used for the border indicator of this text field.
*
* @param enabled whether the text field is enabled
* @param isError whether the text field's current value is in error
* @param interactionSource the [InteractionSource] of this text field. Helps to determine if
* the text field is in focus or not
*/
@Composable
fun indicatorColor(
enabled: Boolean,
isError: Boolean,
interactionSource: InteractionSource
): State
/**
* Represents the color used for the cursor of this text field.
*
* @param isError whether the text field's current value is in error
*/
@Composable
fun cursorColor(isError: Boolean): State
}
/**
* Temporary experimental interface, to expose interactionSource to
* leadingIconColor and trailingIconColor.
*/
@Deprecated(
message = "Empty interface; use parent TextFieldColors instead",
replaceWith = ReplaceWith(
"TextFieldColors",
imports = ["androidx.compose.material.TextFieldColors"]
)
)
@ExperimentalMaterialApi
interface TextFieldColorsWithIcons : TextFieldColors
/**
* Contains the default values used by [TextField] and [OutlinedTextField].
*/
@Immutable
object TextFieldDefaults {
/**
* 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.
*/
val MinHeight = 56.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.
*/
val MinWidth = 280.dp
/**
* The default opacity used for a [TextField]'s and [OutlinedTextField]'s leading and
* trailing icons color.
*/
const val IconOpacity = 0.54f
/**
* The default shape used for a [TextField]'s background
*/
val TextFieldShape: Shape
@Composable
@ReadOnlyComposable
get() = MaterialTheme.shapes.small
.copy(bottomEnd = ZeroCornerSize, bottomStart = ZeroCornerSize)
/**
* The default shape used for a [OutlinedTextField]'s background and border
*/
val OutlinedTextFieldShape: Shape
@Composable
@ReadOnlyComposable
get() = MaterialTheme.shapes.small
/**
* The default thickness of the border in [OutlinedTextField] or indicator line in [TextField]
* in unfocused state.
*/
val UnfocusedBorderThickness = 1.dp
/**
* The default thickness of the border in [OutlinedTextField] or indicator line in [TextField]
* in focused state.
*/
val FocusedBorderThickness = 2.dp
/**
* The default opacity used for a [TextField]'s background color.
*/
const val BackgroundOpacity = 0.12f
// Filled text field uses 42% opacity to meet the contrast requirements for accessibility reasons
/**
* The default opacity used for a [TextField]'s indicator line color when text field is
* not focused.
*/
const val UnfocusedIndicatorLineOpacity = 0.42f
/**
* A modifier to draw a default bottom indicator line in [TextField]. You can use this modifier
* if you build your custom text field using [TextFieldDecorationBox] whilst the [TextField]
* applies it automatically.
*
* @param enabled whether the text field is enabled
* @param isError whether the text field's current value is in error
* @param interactionSource the [InteractionSource] of this text field. Helps to determine if
* the text field is in focus or not
* @param colors [TextFieldColors] used to resolve colors of the text field
* @param focusedIndicatorLineThickness thickness of the indicator line when text field is focused
* @param unfocusedIndicatorLineThickness thickness of the indicator line when text field is
* not focused
*/
@ExperimentalMaterialApi
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,
isError,
interactionSource,
colors,
focusedIndicatorLineThickness,
unfocusedIndicatorLineThickness
)
Modifier.drawIndicatorLine(stroke.value)
}
/**
* 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] applies it automatically.
*
* @param enabled whether the text field is enabled
* @param isError whether the text field's current value is in error
* @param interactionSource the [InteractionSource] of this text field. Helps to determine if
* the text field is in focus or not
* @param colors [TextFieldColors] used to resolve colors of the text field
* @param focusedBorderThickness thickness of the [OutlinedTextField]'s border when it is in
* focused state
* @param unfocusedBorderThickness thickness of the [OutlinedTextField]'s border when it is not
* in focused state
*/
@ExperimentalMaterialApi
@Composable
fun BorderBox(
enabled: Boolean,
isError: Boolean,
interactionSource: InteractionSource,
colors: TextFieldColors,
shape: Shape = OutlinedTextFieldShape,
focusedBorderThickness: Dp = FocusedBorderThickness,
unfocusedBorderThickness: Dp = UnfocusedBorderThickness
) {
val borderStroke = animateBorderStrokeAsState(
enabled,
isError,
interactionSource,
colors,
focusedBorderThickness,
unfocusedBorderThickness
)
Box(Modifier.border(borderStroke.value, shape))
}
/**
* Default content padding applied to [TextField] when there is a label.
*
* Note that when 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].
*
* See [PaddingValues]
*/
@ExperimentalMaterialApi
fun textFieldWithLabelPadding(
start: Dp = TextFieldPadding,
end: Dp = TextFieldPadding,
top: Dp = FirstBaselineOffset,
bottom: Dp = TextFieldBottomPadding
): PaddingValues = PaddingValues(start, top, end, bottom)
/**
* Default content padding applied to [TextField] when the label is null.
* See [PaddingValues] for more details.
*/
@ExperimentalMaterialApi
fun textFieldWithoutLabelPadding(
start: Dp = TextFieldPadding,
top: Dp = TextFieldPadding,
end: Dp = TextFieldPadding,
bottom: Dp = TextFieldPadding
): PaddingValues = PaddingValues(start, top, end, bottom)
/**
* Default content padding applied to [OutlinedTextField].
* See [PaddingValues] for more details.
*/
@ExperimentalMaterialApi
fun outlinedTextFieldPadding(
start: Dp = TextFieldPadding,
top: Dp = TextFieldPadding,
end: Dp = TextFieldPadding,
bottom: Dp = TextFieldPadding
): PaddingValues = PaddingValues(start, top, end, bottom)
/**
* Creates a [TextFieldColors] that represents the default input text, background and content
* (including label, placeholder, leading and trailing icons) colors used in a [TextField].
*/
@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 =
DefaultTextFieldColors(
textColor = textColor,
disabledTextColor = disabledTextColor,
cursorColor = cursorColor,
errorCursorColor = errorCursorColor,
focusedIndicatorColor = focusedIndicatorColor,
unfocusedIndicatorColor = unfocusedIndicatorColor,
errorIndicatorColor = errorIndicatorColor,
disabledIndicatorColor = disabledIndicatorColor,
leadingIconColor = leadingIconColor,
disabledLeadingIconColor = disabledLeadingIconColor,
errorLeadingIconColor = errorLeadingIconColor,
trailingIconColor = trailingIconColor,
disabledTrailingIconColor = disabledTrailingIconColor,
errorTrailingIconColor = errorTrailingIconColor,
backgroundColor = backgroundColor,
focusedLabelColor = focusedLabelColor,
unfocusedLabelColor = unfocusedLabelColor,
disabledLabelColor = disabledLabelColor,
errorLabelColor = errorLabelColor,
placeholderColor = placeholderColor,
disabledPlaceholderColor = disabledPlaceholderColor
)
/**
* Creates a [TextFieldColors] that represents the default input text, background and content
* (including label, placeholder, leading and trailing icons) colors used in an
* [OutlinedTextField].
*/
@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 =
DefaultTextFieldColors(
textColor = textColor,
disabledTextColor = disabledTextColor,
cursorColor = cursorColor,
errorCursorColor = errorCursorColor,
focusedIndicatorColor = focusedBorderColor,
unfocusedIndicatorColor = unfocusedBorderColor,
errorIndicatorColor = errorBorderColor,
disabledIndicatorColor = disabledBorderColor,
leadingIconColor = leadingIconColor,
disabledLeadingIconColor = disabledLeadingIconColor,
errorLeadingIconColor = errorLeadingIconColor,
trailingIconColor = trailingIconColor,
disabledTrailingIconColor = disabledTrailingIconColor,
errorTrailingIconColor = errorTrailingIconColor,
backgroundColor = backgroundColor,
focusedLabelColor = focusedLabelColor,
unfocusedLabelColor = unfocusedLabelColor,
disabledLabelColor = disabledLabelColor,
errorLabelColor = errorLabelColor,
placeholderColor = placeholderColor,
disabledPlaceholderColor = disabledPlaceholderColor
)
/**
* A decoration box which helps creating 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.
*
* See example of using [TextFieldDecorationBox] to build your own custom text field
* @sample androidx.compose.material.samples.CustomTextFieldBasedOnDecorationBox
*C
* @param value the input [String] shown by the text field
* @param 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]
* @param enabled controls the enabled state of the [TextField]. When `false`, visually
* text field will appear in the disabled UI state. You must also pass the same value to the
* [BasicTextField] for it to adjust the behavior accordingly making the text field non-editable,
* non-focusable and non-selectable
* @param singleLine indicates if this is a single line or multi line text field. You must pass
* the same value as to [BasicTextField]
* @param visualTransformation transforms the visual representation of the input [value]. You must
* pass the same value as to [BasicTextField]
* @param interactionSource this is a read-only [InteractionSource] representing the stream of
* [Interaction]s for this text field. You first create and pass in your own remembered
* [MutableInteractionSource] to the [BasicTextField] for it to dispatch events. And then pass the
* same instance to this decoration box for it to observe [Interaction]s and customize the
* appearance / behavior in different [Interaction]s
* @param 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
* @param label the optional label to be displayed inside the text field container. The default
* text style for internal [Text] is [Typography.caption] when the text field is in focus and
* [Typography.subtitle1] when the text field is not in focus
* @param 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]
* @param leadingIcon the optional leading icon to be displayed at the beginning of the text field
* container
* @param trailingIcon the optional trailing icon to be displayed at the end of the text field
* container
* @param shape the shape of the text field's container
* @param colors [TextFieldColors] that will be used to resolve color of the text and content
* (including label, placeholder, leading and trailing icons, bottom indicator) for this text field in
* different states. See [TextFieldDefaults.textFieldColors]
* @param 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 [TextFieldDefaults.textFieldWithLabelPadding] and
* [TextFieldDefaults.textFieldWithoutLabelPadding]
* Note that if there's a label in the text field, the [top][PaddingValues.calculateTopPadding]
* padding will mean the distance from label's [last baseline][LastBaseline] to the top edge of the
* container. All other paddings mean the distance from the corresponding edge of the container to
* the corresponding edge of the closest to it element
*/
@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,
shape: Shape = TextFieldShape,
colors: TextFieldColors = textFieldColors(),
contentPadding: PaddingValues =
if (label == null) {
textFieldWithoutLabelPadding()
} else {
textFieldWithLabelPadding()
}
) {
CommonDecorationBox(
type = TextFieldType.Filled,
value = value,
innerTextField = innerTextField,
visualTransformation = visualTransformation,
placeholder = placeholder,
label = label,
leadingIcon = leadingIcon,
trailingIcon = trailingIcon,
singleLine = singleLine,
enabled = enabled,
isError = isError,
interactionSource = interactionSource,
shape = shape,
colors = colors,
contentPadding = contentPadding,
border = null,
)
}
/**
* 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 [border] parameter to achieve that.
*
* Example of custom text field based on [OutlinedTextFieldDecorationBox]:
* @sample androidx.compose.material.samples.CustomOutlinedTextFieldBasedOnDecorationBox
*
* @param value the input [String] shown by the text field
* @param 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]
* @param enabled controls the enabled state of the [OutlinedTextField]. When `false`, visually
* text field will appear in the disabled UI state. You must also pass the same value to the
* [BasicTextField] for it to adjust the behavior accordingly making the text field non-editable,
* non-focusable and non-selectable
* @param singleLine indicates if this is a single line or multi line text field. You must pass
* the same value as to [BasicTextField]
* @param visualTransformation transforms the visual representation of the input [value]. You must
* pass the same value as to [BasicTextField]
* @param interactionSource this is a read-only [InteractionSource] representing the stream of
* [Interaction]s for this text field. You first create and pass in your own remembered
* [MutableInteractionSource] to the [BasicTextField] for it to dispatch events. And then pass the
* same instance to this decoration box for it to observe [Interaction]s and customize the
* appearance / behavior in different [Interaction]s.
* @param 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
* @param label the optional label to be displayed inside the text field container. The default
* text style for internal [Text] is [Typography.caption] when the text field is in focus and
* [Typography.subtitle1] when the text field is not in focus
* @param 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]
* @param leadingIcon the optional leading icon to be displayed at the beginning of the text field
* container
* @param trailingIcon the optional trailing icon to be displayed at the end of the text field
* container
* @param shape the shape of the text field's container and border
* @param colors [TextFieldColors] that will be used to resolve color of the text and content
* (including label, placeholder, leading and trailing icons, border) for this text field in
* different states. See [TextFieldDefaults.outlinedTextFieldColors]
* @param 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].
* @param 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 [TextFieldDefaults.outlinedTextFieldPadding]
*/
@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,
shape: Shape = OutlinedTextFieldShape,
colors: TextFieldColors = outlinedTextFieldColors(),
contentPadding: PaddingValues = outlinedTextFieldPadding(),
border: @Composable () -> Unit = {
BorderBox(enabled, isError, interactionSource, colors, shape)
}
) {
CommonDecorationBox(
type = TextFieldType.Outlined,
value = value,
visualTransformation = visualTransformation,
innerTextField = innerTextField,
placeholder = placeholder,
label = label,
leadingIcon = leadingIcon,
trailingIcon = trailingIcon,
singleLine = singleLine,
enabled = enabled,
isError = isError,
interactionSource = interactionSource,
shape = shape,
colors = colors,
contentPadding = contentPadding,
border = border,
)
}
@Deprecated(
level = DeprecationLevel.HIDDEN,
message = "Maintained for binary compatibility. Use overload with `shape` parameter."
)
@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,
)
@Deprecated(
level = DeprecationLevel.HIDDEN,
message = "Maintained for binary compatibility. Use overload with `shape` parameter."
)
@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,
)
}
@Immutable
private class DefaultTextFieldColors(
private val textColor: Color,
private val disabledTextColor: Color,
private val cursorColor: Color,
private val errorCursorColor: Color,
private val focusedIndicatorColor: Color,
private val unfocusedIndicatorColor: Color,
private val errorIndicatorColor: Color,
private val disabledIndicatorColor: Color,
private val leadingIconColor: Color,
private val disabledLeadingIconColor: Color,
private val errorLeadingIconColor: Color,
private val trailingIconColor: Color,
private val disabledTrailingIconColor: Color,
private val errorTrailingIconColor: Color,
private val backgroundColor: Color,
private val focusedLabelColor: Color,
private val unfocusedLabelColor: Color,
private val disabledLabelColor: Color,
private val errorLabelColor: Color,
private val placeholderColor: Color,
private val disabledPlaceholderColor: Color
) : TextFieldColors {
@Suppress("OVERRIDE_DEPRECATION")
@Composable
override fun leadingIconColor(enabled: Boolean, isError: Boolean): State {
return rememberUpdatedState(
when {
!enabled -> disabledLeadingIconColor
isError -> errorLeadingIconColor
else -> leadingIconColor
}
)
}
@Composable
override fun leadingIconColor(
enabled: Boolean,
isError: Boolean,
interactionSource: InteractionSource,
): State {
return rememberUpdatedState(
when {
!enabled -> disabledLeadingIconColor
isError -> errorLeadingIconColor
else -> leadingIconColor
}
)
}
@Suppress("OVERRIDE_DEPRECATION")
@Composable
override fun trailingIconColor(enabled: Boolean, isError: Boolean): State {
return rememberUpdatedState(
when {
!enabled -> disabledTrailingIconColor
isError -> errorTrailingIconColor
else -> trailingIconColor
}
)
}
@Composable
override fun trailingIconColor(
enabled: Boolean,
isError: Boolean,
interactionSource: InteractionSource,
): State {
return rememberUpdatedState(
when {
!enabled -> disabledTrailingIconColor
isError -> errorTrailingIconColor
else -> trailingIconColor
}
)
}
@Composable
override fun indicatorColor(
enabled: Boolean,
isError: Boolean,
interactionSource: InteractionSource
): State {
val focused by interactionSource.collectIsFocusedAsState()
val targetValue = when {
!enabled -> disabledIndicatorColor
isError -> errorIndicatorColor
focused -> focusedIndicatorColor
else -> unfocusedIndicatorColor
}
return if (enabled) {
animateColorAsState(targetValue, tween(durationMillis = AnimationDuration))
} else {
rememberUpdatedState(targetValue)
}
}
@Composable
override fun backgroundColor(enabled: Boolean): State {
return rememberUpdatedState(backgroundColor)
}
@Composable
override fun placeholderColor(enabled: Boolean): State {
return rememberUpdatedState(if (enabled) placeholderColor else disabledPlaceholderColor)
}
@Composable
override fun labelColor(
enabled: Boolean,
error: Boolean,
interactionSource: InteractionSource
): State {
val focused by interactionSource.collectIsFocusedAsState()
val targetValue = when {
!enabled -> disabledLabelColor
error -> errorLabelColor
focused -> focusedLabelColor
else -> unfocusedLabelColor
}
return rememberUpdatedState(targetValue)
}
@Composable
override fun textColor(enabled: Boolean): State {
return rememberUpdatedState(if (enabled) textColor else disabledTextColor)
}
@Composable
override fun cursorColor(isError: Boolean): State {
return rememberUpdatedState(if (isError) errorCursorColor else cursorColor)
}
override fun equals(other: Any?): Boolean {
if (this === other) return true
if (other == null || this::class != other::class) return false
other as DefaultTextFieldColors
if (textColor != other.textColor) return false
if (disabledTextColor != other.disabledTextColor) return false
if (cursorColor != other.cursorColor) return false
if (errorCursorColor != other.errorCursorColor) return false
if (focusedIndicatorColor != other.focusedIndicatorColor) return false
if (unfocusedIndicatorColor != other.unfocusedIndicatorColor) return false
if (errorIndicatorColor != other.errorIndicatorColor) return false
if (disabledIndicatorColor != other.disabledIndicatorColor) return false
if (leadingIconColor != other.leadingIconColor) return false
if (disabledLeadingIconColor != other.disabledLeadingIconColor) return false
if (errorLeadingIconColor != other.errorLeadingIconColor) return false
if (trailingIconColor != other.trailingIconColor) return false
if (disabledTrailingIconColor != other.disabledTrailingIconColor) return false
if (errorTrailingIconColor != other.errorTrailingIconColor) return false
if (backgroundColor != other.backgroundColor) return false
if (focusedLabelColor != other.focusedLabelColor) return false
if (unfocusedLabelColor != other.unfocusedLabelColor) return false
if (disabledLabelColor != other.disabledLabelColor) return false
if (errorLabelColor != other.errorLabelColor) return false
if (placeholderColor != other.placeholderColor) return false
if (disabledPlaceholderColor != other.disabledPlaceholderColor) return false
return true
}
override fun hashCode(): Int {
var result = textColor.hashCode()
result = 31 * result + disabledTextColor.hashCode()
result = 31 * result + cursorColor.hashCode()
result = 31 * result + errorCursorColor.hashCode()
result = 31 * result + focusedIndicatorColor.hashCode()
result = 31 * result + unfocusedIndicatorColor.hashCode()
result = 31 * result + errorIndicatorColor.hashCode()
result = 31 * result + disabledIndicatorColor.hashCode()
result = 31 * result + leadingIconColor.hashCode()
result = 31 * result + disabledLeadingIconColor.hashCode()
result = 31 * result + errorLeadingIconColor.hashCode()
result = 31 * result + trailingIconColor.hashCode()
result = 31 * result + disabledTrailingIconColor.hashCode()
result = 31 * result + errorTrailingIconColor.hashCode()
result = 31 * result + backgroundColor.hashCode()
result = 31 * result + focusedLabelColor.hashCode()
result = 31 * result + unfocusedLabelColor.hashCode()
result = 31 * result + disabledLabelColor.hashCode()
result = 31 * result + errorLabelColor.hashCode()
result = 31 * result + placeholderColor.hashCode()
result = 31 * result + disabledPlaceholderColor.hashCode()
return result
}
}
@Composable
private fun animateBorderStrokeAsState(
enabled: Boolean,
isError: Boolean,
interactionSource: InteractionSource,
colors: TextFieldColors,
focusedBorderThickness: Dp,
unfocusedBorderThickness: Dp
): State {
val focused by interactionSource.collectIsFocusedAsState()
val indicatorColor = colors.indicatorColor(enabled, isError, interactionSource)
val targetThickness = if (focused) focusedBorderThickness else unfocusedBorderThickness
val animatedThickness = if (enabled) {
animateDpAsState(targetThickness, tween(durationMillis = AnimationDuration))
} else {
rememberUpdatedState(unfocusedBorderThickness)
}
return rememberUpdatedState(
BorderStroke(animatedThickness.value, SolidColor(indicatorColor.value))
)
}
© 2015 - 2025 Weber Informatics LLC | Privacy Policy