Use input labels
On Android, you can link labels to controls by using the labelFor) attribute. We recommend using a TextView to show labels for input fields.
You can also use TextInputLayout, which allows you to create an input field with a label. The hint) property at the TextInputLayout level is used as visual label. The hintEnabled) and expandedHintEnabled) properties must be set to true to always show the label.
xml
<TextView android:text="Name" android:labelFor="@+id/field"/>
<EditText id="@+id/field" hint="Enter your name"/>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:hintEnabled="true"
app:expandedHintEnabled="true"
android:hint="Name">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enter your name"/>
</com.google.android.material.textfield.TextInputLayout>In Jetpack Compose, there is no built-in way to link a label between different composables. You can vote for this feature in the following Google issue tracker ticket.
As an alternative, you can use the label property of TextField) to provide a hint to the user. Such label would be automatically announcement by accessibility service.
kotlin
TextField(
value = "",
onValueChange = { /* State update logic */ },
label = { Text("Enter your name") }
)On iOS, there is no attribute to link a label to an input field. We recommend combining UILabel with a UITextField or UITextView.
Set the accessibilityLabel of the field to the text of the label.
swift
label.text = "Name"
field.accessibilityLabel = label.textIn SwiftUI, we recommend combining a LabeledContent with a TextField or TextEditor to link a label to an input field.
swift
@State private var name: String = ""
private var textFieldLabel = "Name"
var body: some View {
Form {
LabeledContent(textFieldLabel) {
TextField("", text: $name)
.textFieldStyle(RoundedBorderTextFieldStyle())
}
}
}In Flutter, there is no attribute to link a label to an input field. You can use an InputDecoration to show a label for a TextField. You need to provide a Text widget for the label property.
dart
TextField(
decoration: InputDecoration(
label: Text('Name')
),
);In React Native, there is no attribute to link a label to an input field. We recommend combining Text with a TextInput component.
You can also use a package for displaying instructions, such as React Native Paper. This package includes a TextInput component with a label property.
jsx
import { TextInput } from 'react-native-paper';
const InputWithLabelComponent = () => {
return (
<TextInput
label="Name"
value={name}
/>
);
};In MAUI, there are a two ways to label a component by another one:
- Since .NET 8 you can use the
SemanticProperties.Descriptionproperty. - In older versions, you can use
AutomationProperties.LabeledBy, which is now deprecated.
New usage (.NET 8 and up)
xml
<Label x:Name="headerLabel" Text="Enter your name: " />
<Entry AutomationProperties.IsInAccessibleTree="true"
SemanticProperties.Description="{Binding Text, Source={x:Reference headerLabel}}" />csharp
<Label x:Name="headerLabel" Text="Enter your name: " />
<Entry AutomationProperties.IsInAccessibleTree="true"
AutomationProperties.LabeledBy="{x:Reference headerLabel}" />In Xamarin, you can use the AutomationProperties.LabeledBy property to link a label to an input field. However, LabeledBy only works on Android.
You can also link a Label to an Entry by setting IsInAccessibleTree to false on the label, and setting AutomationProperties.Name property to the value of the label.
xml
<Label x:Name="label"
Text="Name"
AutomationProperties.IsInAccessibleTree="false" />
<Entry AutomationProperties.Name="{x:Reference label}"
AutomationProperties.LabeledBy="{x:Reference label}" />Provide input instructions
On Android, you can use a TextView to show instructions.
You can also use a TextInputLayout, which contains a setHelperText) method to provide instructions. To show instructions, you need to set setHelperTextEnabled) to true.
kotlin
input.setHelperTextEnabled(true)
input.setHelperText("Your password should be at least 8 characters.")In Jetpack Compose, you can use a Text) to show instructions.
You can also use a TextField) which contains supportingText property, which can be used to provide instructions.
kotlin
TextField(
value = "",
onValueChange = { /* State update logic */ },
supportingText = {
Text("Your password should be at least 8 characters.")
}
)On iOS, we recommend using an UILabel to indicate an error. The error message should also be posted to assistive technologies by using an accessibility announcement.
You could also use a third party library to display instructions. Unfortunately, accessibility is often not considered in the implementations.
swift
helpLabel.isHidden = false
helpLabel.text = "Your password should be at least 8 characters."In SwiftUI, we recommend using Text or Label views to show input instructions. The input instructions message should also be posted to assistive technologies by using an accessibility announcement.
swift
@State private var showHelp = false
@State private var helpMessage = ""
var body: some View {
VStack {
// Other UI elements here such as a TextField ...
Button(action: {
// Example action to display input instructions
showHelp.toggle()
helpMessage = "Provide a date in form DD/MM/YYYY, for example, 01/01/2000"
}) {
Text(showHelp ? "Hide Help" : "Help")
}
if showHelp {
Text(helpMessage)
}
}
}In Flutter, you can use an InputDecoration to show instructions for a TextField. You need to provide a string for the helperText property.
dart
TextField(
decoration: InputDecoration(
helperText: 'Your password should be at least 8 characters.',
),
);In React Native, there is no default component to combine an input field with a label. We recommend combining Text with a TextInput component.
You can also use a package for displaying instructions, such as React Native Paper. This package includes a HelperText component which can be used for displaying instructions. The type should be set to info for instructions.
jsx
<Text>Your password should be at least 8 characters.</Text>
<View>
<TextInput label="Password" value={text} onChangeText={onChangeText} />
<HelperText type="info">
Your password should be at least 8 characters.
</HelperText>
</View>In MAUI, to set the input instructions, you can use the SemanticProperties.Description attached property.
Usage (C#)
csharp
var entry = new Entry();
SemanticProperties.SetDescription(entry, "Your password should be at least 8 characters.");xml
<Entry
SemanticProperties.Description="Your password should be at least 8 characters." />In Xamarin.Forms, we recommend using a Label to display instructions.
xml
<Label Text="Your password should be at least 8 characters." />