diff --git a/webui/src/components/ValidLabels.tsx b/webui/src/components/ValidLabels.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..173e146cf1c4cb7af6b9ef545f76c27df2d5c7c0
--- /dev/null
+++ b/webui/src/components/ValidLabels.tsx
@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+import { useValidLabelsQuery } from './ValidLabelsQuery.generated';
+
+const ValidLabels: React.FC = () => {
+  const { loading, error, data } = useValidLabelsQuery();
+  const [filter, setFilter] = useState('');
+  if (loading) return <CircularProgress />;
+  if (error) return <p>Error: {error}</p>;
+  const labels = data?.repository?.validLabels.nodes.filter(
+    label =>
+      filter === '' || label.name.toLowerCase().includes(filter.toLowerCase())
+  );
+
+  return (
+    <>
+      <input
+        type="text"
+        placeholder="Filter labels…"
+        onChange={e => setFilter(e.target.value)}
+        value={filter}
+      />
+      <ul>
+        {labels?.map(l => (
+          <li>{l.name}</li>
+        ))}
+      </ul>
+    </>
+  );
+};
+
+export default ValidLabels;
diff --git a/webui/src/components/ValidLabelsQuery.graphql b/webui/src/components/ValidLabelsQuery.graphql
new file mode 100644
index 0000000000000000000000000000000000000000..39f1881621ae0bc6a0666a773e95f32a9deff391
--- /dev/null
+++ b/webui/src/components/ValidLabelsQuery.graphql
@@ -0,0 +1,11 @@
+#import "../../components/fragments.graphql"
+
+query ValidLabels {
+  repository {
+    validLabels {
+      nodes {
+        ...Label
+      }
+    }
+  }
+}