diff --git a/Makefile b/Makefile
index a23ad04..13f88d6 100644
--- a/Makefile
+++ b/Makefile
@@ -30,6 +30,7 @@ JSSRC=					\
 	form/BondModeSelector.js	\
 	form/NetworkSelector.js		\
 	form/RealmComboBox.js		\
+	form/RoleSelector.js		\
 	button/Button.js		\
 	button/HelpButton.js		\
 	grid/ObjectGrid.js		\
diff --git a/form/RoleSelector.js b/form/RoleSelector.js
new file mode 100644
index 0000000..142cdfd
--- /dev/null
+++ b/form/RoleSelector.js
@@ -0,0 +1,41 @@
+Ext.define('pmx-roles', {
+    extend: 'Ext.data.Model',
+    fields: ['roleid', 'privs'],
+    proxy: {
+	type: 'proxmox',
+	url: "/api2/json/access/roles",
+    },
+    idProperty: 'roleid',
+});
+
+Ext.define('Proxmox.form.RoleSelector', {
+    extend: 'Proxmox.form.ComboGrid',
+    alias: 'widget.pmxRoleSelector',
+
+    allowBlank: false,
+    autoSelect: false,
+    valueField: 'roleid',
+    displayField: 'roleid',
+
+    listConfig: {
+	columns: [
+	    {
+		header: gettext('Role'),
+		sortable: true,
+		dataIndex: 'roleid',
+		flex: 1,
+	    },
+	    {
+		header: gettext('Privileges'),
+		dataIndex: 'privs',
+		flex: 1,
+	    },
+	],
+    },
+
+    store: {
+	autoLoad: true,
+	model: 'pmx-roles',
+	sorters: 'roleid',
+    },
+});