diff --git a/doc/images/qmldesigner-transitions.png b/doc/images/qmldesigner-transitions.png
index f3599b7ca66..8d7309ddc89 100644
Binary files a/doc/images/qmldesigner-transitions.png and b/doc/images/qmldesigner-transitions.png differ
diff --git a/doc/images/qtquick-states-binding-editor.png b/doc/images/qtquick-states-binding-editor.png
new file mode 100644
index 00000000000..57be12f0ec2
Binary files /dev/null and b/doc/images/qtquick-states-binding-editor.png differ
diff --git a/doc/src/qtquick/qtquick-states.qdoc b/doc/src/qtquick/qtquick-states.qdoc
index 58a02677f6c..5a40828f766 100644
--- a/doc/src/qtquick/qtquick-states.qdoc
+++ b/doc/src/qtquick/qtquick-states.qdoc
@@ -79,6 +79,14 @@
     To determine when the state should be applied, select
     \uicontrol {Set when Condition} in the menu and specify a
     \l [QtQuick]{State::when}{when} property for the state.
+    Set the value of the property to an expression that
+    evaluates to \c true when you want the state to be applied.
+    In the binding editor, select the component and property to
+    create the expression. For example, to change the state when
+    a button is pressed, you could select a button component and
+    its pressed property.
+
+    \image qtquick-states-binding-editor.png "Binding editor in States pane"
 
     You can preview the states in the \uicontrol States pane and click them to
     switch between states on the canvas.