Change OutlinedTextField border thickness in jetpack compose

Question

I have a custom OutlinedTextField in my Jetpack Compose project, and I'm facing an issue with the default border thickness. The default border appears to be very thin, and I want to change its thickness. However, I couldn't find any direct property or value to adjust the border thickness.

@Composable
fun CustomTextField(
    modifier: Modifier = Modifier,
    readOnly: Boolean = false,
    value: String?,
    onValueChange: (String) -> Unit,
    maxLength: Int = 50,
    isValid: ((String) -> Boolean)? = null,
    label: String? = null,
    keyboardType: KeyboardType = KeyboardType.Text,
    imeAction: ImeAction = ImeAction.Done,
    maxLines: Int = 1,
    trailingIcon: @Composable (() -> Unit)? = null,
    shape: Shape = MaterialTheme.shapes.extraLarge,
    labelColor: Color? = null,
    containerColor: Color = MaterialTheme.colorScheme.primary.copy(0.1f),
    focusedBorderColor: Color = MaterialTheme.colorScheme.primary,
    unfocusedBorderColor: Color = MaterialTheme.colorScheme.primary.copy(0.75f),
    placeholder: String? = null
) {
 
  
    OutlinedTextField(
        readOnly = readOnly,
        value = value ?: "",
        onValueChange = { text ->
            if (text.length <= maxLength) {
                onValueChange(text)
            }
        },
        textStyle = MaterialTheme.typography.bodyMedium,
        label = {
            label?.let {
                CustomText(
                    text = label,
                    style = MaterialTheme.typography.labelMedium,
                    color = labelColor,
                    fontSize = 12.sp,
                    fontWeight = FontWeight.Bold
                )
            }
        },
        placeholder = {
            placeholder?.let {
                CustomText(
                    text = placeholder,
                    style = MaterialTheme.typography.bodyMedium.copy(color = Color.Gray),
                    color = Color.Gray
                )
            }
        },
       
        singleLine = maxLines == 1,
        maxLines = maxLines,
        colors = TextFieldDefaults.outlinedTextFieldColors(
            containerColor = containerColor,
            focusedBorderColor = focusedBorderColor,
            unfocusedBorderColor = unfocusedBorderColor,
        ),
        trailingIcon = trailingIcon
    )
}

Answer 1

With M3, you can use a BasicTextField + OutlinedTextFieldDefaults.DecorationBox.

For the container parameter, you can create a custom container using OutlinedTextFieldDefaults.ContainerBox, which allows you to customize the focusedBorderThickness and the unfocusedBorderThickness values:

        BasicTextField(
            value = value,
            onValueChange = { value = it },
            interactionSource = interactionSource,
            enabled = true,
            singleLine = singleLine,
        ) {
            OutlinedTextFieldDefaults.DecorationBox(
                value = value,
                innerTextField = it,
                singleLine = singleLine,
                enabled = true,
                label = { Text("Label") },
                placeholder = { Text("Placeholder") },
                visualTransformation = VisualTransformation.None,
                interactionSource = interactionSource,
                colors = OutlinedTextFieldDefaults.colors(),
                container = {
                    OutlinedTextFieldDefaults.ContainerBox(
                        enabled,
                        isError,
                        interactionSource,
                        colors,
                        shape,
                        focusedBorderThickness = 4.dp,
                        unfocusedBorderThickness = 4.dp
                    )
                }
            )
        }