TextField & OutlinedTextField
Read what the user types.
TextField & OutlinedTextField is a free Jetpack Compose Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Jetpack Compose Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why Text Fields Matter
Almost every app asks the user to type something. In Compose, the TextField is your gateway to reading that input. ✏️
The TextField Composable
A TextField shows an editable box. It needs a current value and a callback that fires every time the text changes.
TextField(
value = name,
onValueChange = { name = it }
)State Drives the Value
The field never stores text itself. You hold it in state and feed it back in, so the UI always shows the latest value.
var name by remember { mutableStateOf("") }onValueChange Closes the Loop
Each keystroke calls onValueChange with the new text. You save it to state, Compose redraws, and the field reflects what was typed.
onValueChange = { newText -> name = newText }Meet OutlinedTextField
OutlinedTextField works exactly the same way, but draws a clean border around the input instead of a filled background.
OutlinedTextField(
value = name,
onValueChange = { name = it }
)Filled vs Outlined
The filled TextField has a shaded box and underline. The outlined one is lighter and airier. They behave identically, so pick by style.
Add a Label
A label tells the user what the field is for. It floats above the text once the field is focused or filled.
OutlinedTextField(
value = name,
onValueChange = { name = it },
label = { Text("Name") }
)Single Line by Default
Set singleLine to true to keep input on one row. The keyboard then shows a Done action instead of a newline.
TextField(
value = name,
onValueChange = { name = it },
singleLine = true
)Read the Value Anywhere
Because the text lives in state, any other Composable can read it. Greet the user the moment they finish typing their name. 👋
Text("Hello, " + name)It Is a Controlled Field
Compose fields are controlled: what you display is whatever you pass as value. Forget to update state and the field appears frozen.
Start Simple, Grow Later
A value plus an onValueChange is all you truly need. Labels, icons, and validation are extras you add on top.
Quick Check
Which parameter receives the user's new text on every keystroke?
Recap
You met TextField and OutlinedTextField: bind a value from state, update it in onValueChange, and add a label. That is text input in Compose. 🎉
Frequently asked questions
Is the “TextField & OutlinedTextField” lesson free?
Yes — the full text of “TextField & OutlinedTextField” is free to read here on the web, and the Jetpack Compose Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Jetpack Compose Academy course, upgrade to CoddyKit PRO.
What will I learn in “TextField & OutlinedTextField”?
Read what the user types. You practise Jetpack Compose Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Jetpack Compose Academy?
No prior experience is required. Jetpack Compose Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “TextField & OutlinedTextField” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Jetpack Compose Academy lesson?
Yes. Every Jetpack Compose Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- TextField & OutlinedTextField
- Labels, Placeholders & Leading Icons
- Keyboard Types & IME Actions
- Inline Validation & Error States