Material 3 Text Fields in Jetpack Compose

Material 3 Text Fields in Jetpack Compose

Get started with Material 3 text fields in Jetpack Compose to create user-friendly interfaces for entering and modifying text.

Explore Text Field Styles

Learn to implement state-based and value-based text fields with various configurations.

There are four Text Field styles:
  1. Basic Text Field
  2. Outlined Text Field
  3. Styled Text Field
  4. Secure Text Field

Basic Text Field

Implements a filled text field with Material Design styling.


@Composable
fun BasicTextFieldExample() {
    TextField(
        state = rememberTextFieldState(initialText = "Hello"),
        label = { Text("Label") }
    )
}
  

Use a Basic Text Field when you want a filled Material Design text input.

Examples:

  • Enter a username in a login form
  • Input a comment in a social app
  • Type a search query

Outlined Text Field

Implements an outlined text field with Material Design styling.


@Composable
fun OutlinedTextFieldExample() {
    OutlinedTextField(
        state = rememberTextFieldState(),
        label = { Text("Label") }
    )
}
  

Use an Outlined Text Field when you want an outlined Material Design text input.

Examples:

  • Enter an email in a registration form
  • Input a description in a profile
  • Type a message in a chat app

Styled Text Field

Customizes text field with styling options like gradient brush and line limits.


@Composable
fun StyledTextFieldExample() {
    val brush = remember {
        Brush.linearGradient(
            colors = listOf(Color.Red, Color.Yellow, Color.Green, Color.Blue, Color.Magenta)
        )
    }
    TextField(
        state = rememberTextFieldState("Hello\nWorld\nInvisible"),
        lineLimits = TextFieldLineLimits.MultiLine(maxHeightInLines = 2),
        placeholder = { Text("") },
        textStyle = TextStyle(brush = brush, fontWeight = FontWeight.Bold),
        label = { Text("Enter text") },
        modifier = Modifier.padding(20.dp)
    )
}
  

Use a Styled Text Field when you want to customize appearance with gradients or line limits.

Examples:

  • Style input in a creative app
  • Limit text in a note-taking app
  • Enhance forms with branded visuals

Secure Text Field

Implements a password field with obfuscation options.


@Composable
fun SecureTextFieldExample() {
    SecureTextField(
        state = rememberTextFieldState(),
        textObfuscationMode = TextObfuscationMode.RevealLastTyped,
        label = { Text("Password") }
    )
}
  

Use a Secure Text Field when you want to securely input passwords.

Examples:

  • Enter a password in a login screen
  • Input sensitive data in a form
  • Secure authentication fields

Text Field Properties

Understand the key properties used in the text field examples.

Property Usage
state* Required: TextFieldState for managing text and selection
label Displays a label for the text field
lineLimits Configures single or multi-line limits (TextFieldLineLimits)
textStyle Customizes text appearance (e.g., color, brush, font)
inputTransformation Filters user input before saving to state
outputTransformation Formats displayed text without altering state
textObfuscationMode Controls password visibility (SecureTextField only)
keyboardOptions Configures keyboard (capitalization, autoCorrect, etc.)
onKeyboardAction Handles keyboard action button events

Post a Comment

Previous Post Next Post