Etiquetas, marcadores de posición e iconos iniciales
Haga que las entradas sean claras y fáciles de usar.
Etiquetas, marcadores de posición e iconos iniciales es una lección gratuita de Jetpack Compose Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Jetpack Compose Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
Make Inputs Friendly
A bare box leaves users guessing. Labels, placeholders, and icons turn a plain field into one that guides the user. 🧭
The label Slot
The label names the field. It sits inside when empty, then floats up to the border once the field is focused or filled.
OutlinedTextField(
value = email,
onValueChange = { email = it },
label = { Text("Email") }
)Add a Placeholder
A placeholder is hint text shown only while the field is empty. Use it for an example, not for the field's name.
placeholder = { Text("you@example.com") }Label vs Placeholder
The label always stays visible to identify the field. The placeholder vanishes the instant the user starts typing. Use both together.
Leading Icons
A leadingIcon sits at the start of the field. An envelope next to an email box makes its purpose obvious at a glance.
leadingIcon = {
Icon(Icons.Default.Email, contentDescription = null)
}Trailing Icons Too
A trailingIcon sits at the end. It is perfect for a clear button or a password visibility toggle.
trailingIcon = {
Icon(Icons.Default.Clear, contentDescription = "Clear")
}Always Describe Icons
Give each Icon a contentDescription so screen readers can announce it. Pass null only when the icon is purely decorative.
Make the Trailing Icon Tappable
Wrap a trailing icon in an IconButton so users can tap it, for example to clear the field in one touch.
trailingIcon = {
IconButton(onClick = { email = "" }) {
Icon(Icons.Default.Clear, "Clear")
}
}Supporting Text
supportingText shows a small hint below the field, like a format reminder or a character limit, without crowding the input.
supportingText = { Text("We never share your email.") }Combine Them Thoughtfully
Label plus icon plus a short placeholder is plenty. Too many hints add noise, so keep each field calm and clear.
Slots Are Just Composables
Every slot, like label and leadingIcon, is a lambda holding Composables. That means you can put any UI you want inside them.
Quick Check
When does a placeholder disappear from a text field?
Recap
You dressed up inputs with a label, placeholder hints, leading and trailing icons, and supporting text. Friendly fields, happy users. 😊
Preguntas frecuentes
¿La lección «Etiquetas, marcadores de posición e iconos iniciales» es gratis?
Sí — el texto completo de «Etiquetas, marcadores de posición e iconos iniciales» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Jetpack Compose Academy, actualiza a CoddyKit PRO. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Etiquetas, marcadores de posición e iconos iniciales»?
Haga que las entradas sean claras y fáciles de usar. Practicas Jetpack Compose Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Jetpack Compose Academy?
No se requiere experiencia previa. Jetpack Compose Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Etiquetas, marcadores de posición e iconos iniciales»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Jetpack Compose Academy?
Sí. Cada lección de Jetpack Compose Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- TextField y OutlinedTextField
- Etiquetas, marcadores de posición e iconos iniciales
- Tipos de teclado y acciones IME
- Validación en línea y estados de error