TextFieldDefaults
-
Cmn
object TextFieldDefaults
Contains the default values used by TextField and OutlinedTextField.
Summary
Constants |
||
|---|---|---|
const Float |
BackgroundOpacity = 0.12fThe default opacity used for a |
Cmn
|
const Float |
IconOpacity = 0.54fThe default opacity used for a |
Cmn
|
const Float |
UnfocusedIndicatorLineOpacity = 0.42fThe default opacity used for a |
Cmn
|
Public functions |
||
|---|---|---|
Unit |
@ComposableComposable that draws a default border stroke in |
Cmn
|
Unit |
@ComposableA decoration box used to create custom text fields based on Material Design outlined text field. |
Cmn
|
Unit |
@ComposableA decoration box used to create custom text fields based on Material Design filled text field. |
Cmn
|
Modifier |
Modifier.indicatorLine(A modifier to draw a default bottom indicator line for |
Cmn
|
TextFieldColors |
@ComposableCreates a |
Cmn
|
PaddingValues |
outlinedTextFieldPadding(start: Dp, top: Dp, end: Dp, bottom: Dp)Default content padding applied to |
Cmn
|
TextFieldColors |
@ComposableCreates a |
Cmn
|
PaddingValues |
textFieldWithLabelPadding(start: Dp, end: Dp, top: Dp, bottom: Dp)Default content padding applied to |
Cmn
|
PaddingValues |
textFieldWithoutLabelPadding(start: Dp, top: Dp, end: Dp, bottom: Dp)Default content padding applied to |
Cmn
|
Public properties |
||
|---|---|---|
Dp |
The default thickness of the border in |
Cmn
|
Dp |
The default min height applied to a |
Cmn
|
Dp |
The default min width applied to a |
Cmn
|
Shape |
The default shape used for a |
Cmn
|
Shape |
The default shape used for a |
Cmn
|
Dp |
The default thickness of the border in |
Cmn
|
Constants
BackgroundOpacity
const val BackgroundOpacity = 0.12f: Float
The default opacity used for a TextField's background color.
IconOpacity
const val IconOpacity = 0.54f: Float
The default opacity used for a TextField's and OutlinedTextField's leading and trailing icons color.
UnfocusedIndicatorLineOpacity
const val UnfocusedIndicatorLineOpacity = 0.42f: Float
The default opacity used for a TextField's indicator line color when text field is not focused.
Public functions
BorderBox
@Composable
fun BorderBox(
enabled: Boolean,
isError: Boolean,
interactionSource: InteractionSource,
colors: TextFieldColors,
shape: Shape = OutlinedTextFieldShape,
focusedBorderThickness: Dp = FocusedBorderThickness,
unfocusedBorderThickness: Dp = UnfocusedBorderThickness
): Unit
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: Boolean |
whether the text field is enabled. |
isError: Boolean |
whether the text field's current value is in error. |
interactionSource: InteractionSource |
the |
colors: TextFieldColors |
|
focusedBorderThickness: Dp = FocusedBorderThickness |
thickness of the |
unfocusedBorderThickness: Dp = UnfocusedBorderThickness |
thickness of the |
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) }
): Unit
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:
import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.padding import androidx.compose.foundation.text.BasicTextField import androidx.compose.material.OutlinedTextField import androidx.compose.material.Text import androidx.compose.material.TextField import androidx.compose.material.TextFieldDefaults import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.RectangleShape import androidx.compose.ui.text.input.VisualTransformation import androidx.compose.ui.unit.dp val (value, onValueChange) = remember { mutableStateOf("") } 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 colors = TextFieldDefaults.outlinedTextFieldColors( unfocusedBorderColor = Color.LightGray, focusedBorderColor = Color.DarkGray, ) BasicTextField( value = value, onValueChange = onValueChange, modifier = Modifier, // internal implementation of the BasicTextField will dispatch focus events interactionSource = interactionSource, enabled = enabled, singleLine = singleLine, ) { TextFieldDefaults.OutlinedTextFieldDecorationBox( value = value, visualTransformation = VisualTransformation.None, 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, // keep vertical paddings but change the horizontal contentPadding = TextFieldDefaults.textFieldWithoutLabelPadding(start = 8.dp, end = 8.dp), // update border thickness and shape border = { TextFieldDefaults.BorderBox( enabled = enabled, isError = false, colors = colors, interactionSource = interactionSource, shape = RectangleShape, unfocusedBorderThickness = 2.dp, focusedBorderThickness = 4.dp, ) }, // update border colors colors = colors, ) }
| Parameters | |
|---|---|
value: String |
the input |
innerTextField: @Composable () -> Unit |
input text field that this decoration box wraps. Pass the framework-controlled composable parameter |
enabled: Boolean |
the enabled state of the text field. When |
singleLine: Boolean |
indicates if this is a single line or multi line text field. This must be the same value that is passed to |
visualTransformation: VisualTransformation |
transforms the visual representation of the input |
interactionSource: InteractionSource |
the read-only |
isError: Boolean = false |
indicates if the text field's current value is in an error state. When |
label: (@Composable () -> Unit)? = null |
the optional label to be displayed inside the text field container. The default text style uses |
placeholder: (@Composable () -> Unit)? = null |
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 |
leadingIcon: (@Composable () -> Unit)? = null |
the optional leading icon to be displayed at the beginning of the text field container. |
trailingIcon: (@Composable () -> Unit)? = null |
the optional trailing icon to be displayed at the end of the text field container. |
shape: Shape = OutlinedTextFieldShape |
the shape of the text field's container and border. |
colors: TextFieldColors = outlinedTextFieldColors() |
|
contentPadding: PaddingValues = outlinedTextFieldPadding() |
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 |
border: @Composable () -> Unit = {
BorderBox(enabled, isError, interactionSource, colors, shape)
} |
the border to be drawn around the text field. The cutout to fit the |
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() }
): 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 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:
import androidx.compose.foundation.background import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.padding import androidx.compose.foundation.text.BasicTextField import androidx.compose.material.Text import androidx.compose.material.TextField import androidx.compose.material.TextFieldDefaults import androidx.compose.material.TextFieldDefaults.indicatorLine import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.input.PasswordVisualTransformation import androidx.compose.ui.text.input.VisualTransformation import androidx.compose.ui.unit.dp val (value, onValueChange) = remember { mutableStateOf("") } 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() val colors = TextFieldDefaults.textFieldColors() BasicTextField( value = value, onValueChange = onValueChange, modifier = Modifier.background( color = colors.backgroundColor(enabled).value, shape = TextFieldDefaults.TextFieldShape, ) .indicatorLine( enabled = enabled, isError = false, interactionSource = interactionSource, colors = colors, ), visualTransformation = passwordTransformation, // internal implementation of the BasicTextField will dispatch focus events interactionSource = interactionSource, enabled = enabled, singleLine = singleLine, ) { TextFieldDefaults.TextFieldDecorationBox( 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, // keep vertical paddings but change the horizontal contentPadding = TextFieldDefaults.textFieldWithoutLabelPadding(start = 8.dp, end = 8.dp), ) }
| Parameters | |
|---|---|
value: String |
the input |
innerTextField: @Composable () -> Unit |
input text field that this decoration box wraps. Pass the framework-controlled composable parameter |
enabled: Boolean |
the enabled state of the text field. When |
singleLine: Boolean |
indicates if this is a single line or multi line text field. This must be the same value that is passed to |
visualTransformation: VisualTransformation |
transforms the visual representation of the input |
interactionSource: InteractionSource |
the read-only |
isError: Boolean = false |
indicates if the text field's current value is in an error state. When |
label: (@Composable () -> Unit)? = null |
the optional label to be displayed inside the text field container. The default text style uses |
placeholder: (@Composable () -> Unit)? = null |
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 |
leadingIcon: (@Composable () -> Unit)? = null |
the optional leading icon to be displayed at the beginning of the text field container. |
trailingIcon: (@Composable () -> Unit)? = null |
the optional trailing icon to be displayed at the end of the text field container. |
shape: Shape = TextFieldShape |
the shape of the text field's container. |
colors: TextFieldColors = textFieldColors() |
|
contentPadding: PaddingValues = if (label == null) {
textFieldWithoutLabelPadding()
} else {
textFieldWithLabelPadding()
} |
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 |
indicatorLine
fun Modifier.indicatorLine(
enabled: Boolean,
isError: Boolean,
interactionSource: InteractionSource,
colors: TextFieldColors,
focusedIndicatorLineThickness: Dp = FocusedBorderThickness,
unfocusedIndicatorLineThickness: Dp = UnfocusedBorderThickness
): Modifier
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: Boolean |
whether the text field is enabled. |
isError: Boolean |
whether the text field's current value is in error. |
interactionSource: InteractionSource |
the |
colors: TextFieldColors |
|
focusedIndicatorLineThickness: Dp = FocusedBorderThickness |
thickness of the indicator line when text field is focused. |
unfocusedIndicatorLineThickness: Dp = UnfocusedBorderThickness |
thickness of the indicator line when text field is not focused. |
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.
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.
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.
Public properties
FocusedBorderThickness
val FocusedBorderThickness: Dp
The default thickness of the border in OutlinedTextField or indicator line in TextField in focused state.
MinHeight
val MinHeight: 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.
MinWidth
val MinWidth: 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.
OutlinedTextFieldShape
val OutlinedTextFieldShape: Shape
The default shape used for a OutlinedTextField's background and border
UnfocusedBorderThickness
val UnfocusedBorderThickness: Dp
The default thickness of the border in OutlinedTextField or indicator line in TextField in unfocused state.