input-label.md

Input label

Input fields should have labels so that users know what input data is expected. These labels should stay visible while users are entering data. A placeholder which disappears while entering data does not count as a label.

WCAG

Relates to 3.3.2

Android

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.

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

iOS

On iOS, there is no attribute to link a label to an input field. We recommend combining UILabel with a UITextField. Set isAccessibilityElement to false for the label, and set the text of the label as accessibilityLabel for the field.

label.text = "Name"
label.isAccessibilityElement = false
field.accessibilityLabel = label.text

Flutter

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.

TextField(
    decoration: InputDecoration(
        label: Text('Name')
    ),
);

React Native

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.

import { TextInput } from 'react-native-paper';

const InputWithLabelComponent = () => {
  return (
    <TextInput
      label="Name"
      value={name}
    />
  );
};

Xamarin

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.

<Label x:Name="label" 
       Text="Name" 
       AutomationProperties.IsInAccessibleTree="false" />

<Entry AutomationProperties.Name="{x:Reference label}"
       AutomationProperties.LabeledBy="{x:Reference label}" />