Skip to content

Text Field

A themamble component to build text fields with the styling of your choise.

Installation

build.gradle.kts
dependencies {
    implementation("com.composables:core:1.29.0")
}

Basic Example

To create a text field, use the TextField component. It handles its own state and sets important accessibility semantics.

TextField(
    value = "",
    onValueChange = { /* TODO */ },
    modifier = Modifier.fillMaxWidth(),
    placeholder = "Enter text here",
    borderWidth = 1.dp,
    borderColor = Color.Gray,
    shape = RoundedCornerShape(8.dp),
    singleLine = true
)

Code Examples

Consistent typography through the app

It is recommended to use the provided LocalTextStyle in order to maintain consistent text styling across your app.

If you need to override a text style for specific cases, you can either override a specific parameter via the Text modifier or pass an entire different style via the style parameter:

CompositionLocalProvider(LocalTextStyle provides TextStyle(fontSize = 18.sp, fontWeight = FontWeight.Medium)) {
    Column {
        // this text field will use the provided Text Style
        TextField(
            value = "",
            onValueChange = { /* TODO */ },
        )
        Text("So will this text")

        Text("This text is also styled, but slighly modified", letterSpacing = 2.sp)

        Text("This text is completely different", style = TextStyle())
    }
}

Specifying Input Type

You can specify the input type for the TextField using the keyboardOptions parameter. For example, to specify an email input type:

TextField(
    value = "",
    onValueChange = { /* TODO */ },
    modifier = Modifier.fillMaxWidth(),
    placeholder = "Email",
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email)
)

Adding a Trailing Icon

You can add a trailing icon to the TextField to provide additional functionality, such as toggling password visibility:

var showPassword by remember { mutableStateOf(false) }

TextField(
    value = "",
    onValueChange = { /* TODO */ },
    modifier = Modifier.fillMaxWidth(),
    placeholder = "Password",
    visualTransformation = if (showPassword) VisualTransformation.None else PasswordVisualTransformation(),
    trailingIcon = {
        Button(
            onClick = { showPassword = !showPassword },
            backgroundColor = Color.Transparent,
            contentPadding = PaddingValues(4.dp),
            shape = RoundedCornerShape(4.dp)
        ) {
            Icon(
                imageVector = if (showPassword) EyeOff else Eye,
                contentDescription = if (showPassword) "Hide password" else "Show password",
                tint = Color(0xFF757575)
            )
        }
    }
)

Handling Password Input

To handle password input, you can use the visualTransformation parameter to obscure the text:

TextField(
    value = "",
    onValueChange = { /* TODO */ },
    modifier = Modifier.fillMaxWidth(),
    placeholder = "Password",
    visualTransformation = PasswordVisualTransformation(),
    trailingIcon = {
        Button(
            onClick = { /* Toggle password visibility */ },
            backgroundColor = Color.Transparent,
            contentPadding = PaddingValues(4.dp),
            shape = RoundedCornerShape(4.dp)
        ) {
            Icon(
                imageVector = if (/* condition */) EyeOff else Eye,
                contentDescription = if (/* condition */) "Hide password" else "Show password",
                tint = Color(0xFF757575)
            )
        }
    }
)

Styling

Every component in Compose Unstyled is renderless. They handle all UX pattern logic, internal state, accessibility (according to ARIA standards), and keyboard interactions for you, but they do not render any UI to the screen.

This is by design so that you can style your components exactly to your needs.

Most of the time, styling is done using Modifiers of your choice. However, sometimes this is not enough due to the order of the Modifiers affecting the visual outcome.

For such cases we provide specific styling parameters.

Component API

TextField

Parameter Description
value The current text in the text field.
onValueChange Callback when the text changes.
editable Whether the text field is editable.
modifier Modifier to be applied to the text field.
contentPadding Padding inside the text field.
leadingIcon Leading icon to display inside the text field.
trailingIcon Trailing icon to display inside the text field.
placeholder Placeholder text when the field is empty.
contentColor Color of the text content.
disabledColor Color when the text field is disabled.
backgroundColor Background color of the text field.
borderWidth Width of the border.
borderColor Color of the border.
shape Shape of the text field.
textStyle Style to apply to the text.
textAlign Alignment of the text.
fontSize Size of the font.
fontWeight Weight of the font.
fontFamily Family of the font.
singleLine Whether the text field is single line.
minLines Minimum number of lines to display.
maxLines Maximum number of lines to display.
keyboardOptions Options for the keyboard.
keyboardActions Actions for the keyboard.
interactionSource Interaction source for the text field.
spacing Spacing between elements inside the text field.
visualTransformation Visual transformation for the text.

Icons and other icons

You can find the icons used in our examples and many other icons at composeicons.com.

Styled Examples

Looking for styled components for Jetpack Compose or Compose Multiplatform?

Explore a rich collection of production ready examples at ComposablesUi.com

Composables UI