Provide solutions for errors
On Android, you can use a TextView to show an error message. The error message should also be posted to assistive technologies by using an accessibility announcement.
You can also use TextInputLayout, which makes showing error messages easier. Set setErrorEnabled) to true and then set the error message by using the setError method.
kotlin
textView.setVisibility(View.VISIBLE)
textView.text = "Invalid date, must be in the form DD/MM/YYYY, for example, 01/01/2000"
input.setErrorEnabled(true)
input.setError("Invalid date, must be in the form DD/MM/YYYY, for example, 01/01/2000")In Jetpack Compose, you can use error.error(kotlin.String)) function inside the semantics.semantics(kotlin.Boolean,kotlin.Function1)) block modifier to announce an error message to the accessibility service. Keep in mind that these announcements will not be shown visually. To show the message, use label property of TextField) in conjunction with isError, which automatically changes the appearance of the TextField).
kotlin
var errorMessage by remember { mutableStateOf("") }
val isError = remember(errorMessage) { errorMessage.isNotEmpty() }
TextField(
value = "",
label = {
Text(errorMessage.ifEmpty { "TextField label" })
},
isError = isError,
onValueChange = { /* State update logic */ },
modifier = Modifier
.semantics {
if (errorMessage.isNotEmpty()) {
error(errorMessage)
}
}
)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
errorLabel.isHidden = false
errorLabel.text = "Invalid date, must be in the form DD/MM/YYYY, for example, 01/01/2000"In SwiftUI, we recommend using Text or Label views to indicate an error. The error message should also be posted to assistive technologies by using an accessibility announcement.
swift
@State private var showError = false
@State private var errorMessage = ""
var body: some View {
VStack {
// Other UI elements here such as a TextField ...
Button(action: {
// Example action to trigger error
showError = true
errorMessage = "Invalid date, must be in the form DD/MM/YYYY, for example, 01/01/2000"
}) {
Text("Schedule Appointment")
}
if showError {
Text(errorMessage)
.foregroundColor(.red)
.accessibilityLabel(errorMessage)
.onAppear {
// Post an accessibility announcement
UIAccessibility.post(notification: .announcement,
argument: errorMessage)
}
}
}
}With Flutter, you can set an InputDecoration on a TextField to indicate an error. Set the errorText property to the error message that should be displayed. To remove the error, set the errorText to null. The error message should also be posted to assistive technologies by using an accessibility announcement..
dart
bool _hasError = false;
TextField(
decoration: InputDecoration(
labelText: 'Date of birth',
helperText: _hasError ? 'Invalid date, must be in the form DD/MM/YYYY, for example, 01/01/2000' : null,
),
);In React Native we recommend using a Text component to display an error. The error message should also be posted to assistive technologies by using an accessibility announcement.
You can also use a package for displaying errors, such as React Native Paper. This package includes a HelperText component which can be used for displaying errors. The type should be set to error for errors.
jsx
<Text>Invalid date, must be in the form DD/MM/YYYY, for example, 01/01/2000</Text>
<View>
<TextInput label="Date of birth" value={text} onChangeText={onChangeText} />
<HelperText type="error" visible={hasErrors()}>
Invalid date, must be in the form DD/MM/YYYY, for example, 01/01/2000
</HelperText>
</View>In MAUI, there is no built-in component for this, but you can hide or show a Label to display an error message.
Usage (C#)
csharp
label.Text = "This is an error message";
label.IsVisible = true;xml
<Label
Text="This is an error message"
IsVisible="True" />In Xamarin.Forms, we recommend using a Label to display an error. The error message should also be posted to assistive technologies by using an accessibility announcement..
xml
<Label
Text="Invalid date, must be in the form DD/MM/YYYY, for example, 01/01/2000"
IsVisible="{Binding IsValid}" />