Jetpack Compose Academy · Lezione

Etichette, segnaposto e icone iniziali

Renda gli input chiari e intuitivi.

Etichette, segnaposto e icone iniziali è una lezione Jetpack Compose Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Jetpack Compose Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Jetpack Compose Academy include 4 lezioni in totale.

Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.

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. 😊

Domande Frequenti

La lezione «Etichette, segnaposto e icone iniziali» è gratuita?

Sì — il testo completo di «Etichette, segnaposto e icone iniziali» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Jetpack Compose Academy, passa a CoddyKit PRO. Il corso Jetpack Compose Academy include 4 lezioni in totale.

Cosa imparerò in «Etichette, segnaposto e icone iniziali»?

Renda gli input chiari e intuitivi. Eserciti Jetpack Compose Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Jetpack Compose Academy?

Non è richiesta alcuna esperienza precedente. Jetpack Compose Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Etichette, segnaposto e icone iniziali»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Jetpack Compose Academy?

Sì. Ogni lezione Jetpack Compose Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Jetpack Compose Academy