CODEWITHSUNDEEP
androidmaterial-designandroid-jetpack-composeandroid-compose-textfieldandroid-jetpack-compose-material3
William Humphreys
William Humphreys

Reputation: 1404

Jetpack Compose (Android) Permanently Showing OutlinedTextField Label in Material 3

Is it possible using the Jetpack Compose Material 3 OutlinedTextField to have the Label show all the time.

I.e., The Label is normally shown inside the OutlinedTextField greyed out, you click on it and it appears above the field and now shows the placeholder text.

I want it to always display the Label above the OutlinedTextField and always show the placeholder even when it hasn't been clicked on.

This mainly because I like to put the "Required" text as the Placeholder that is permanently shown.

I find it a waste of screen space using the supporting text and rather polluting to have it written next to the Label.

For note there are many ways I can show "required" with stars etc but that is not my question.

Upvotes: 6

Views: 5721

Answers (1)

Farman Ali Khan
Farman Ali Khan

Reputation: 896

Do you want to achieve something like below image?

enter image description here

     OutlinedTextField(
                    value = "",
                    onValueChange = {},
                    label = { Text("Email", color = Black) },
                    colors = TextFieldDefaults.outlinedTextFieldColors(
                        focusedBorderColor = Green,
                        unfocusedBorderColor = Green),

                    visualTransformation = if ("".isEmpty())
                        PlaceholderTransformation("Enter Email")
                    else VisualTransformation.None,
                )

Please check this answer - Equivalent of "expandedHintEnabled" in Jetpack Compose TextField

Upvotes: 0

Related Questions