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.
- Basic Text Field
- Outlined Text Field
- Styled Text Field
- 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 |