diff --git a/ui/admin/app/components/form/role/index.hbs b/ui/admin/app/components/form/role/index.hbs
index 1a6a9a94e..a20c290f4 100644
--- a/ui/admin/app/components/form/role/index.hbs
+++ b/ui/admin/app/components/form/role/index.hbs
@@ -6,44 +6,47 @@
   as |form|
 >
 
-  <form.input
-    @name='name'
-    @type='name'
+  <Hds::Form::TextInput::Field
+    @isRequired={{false}}
+    @isOptional={{true}}
     @value={{@model.name}}
-    @label={{t 'form.name.label'}}
-    @helperText={{t 'form.name.help'}}
-    @error={{@model.errors.name}}
-    readonly={{false}}
-    as |field|
+    @isInvalid={{@model.errors.name}}
+    @type='text'
+    name='name'
+    disabled={{form.disabled}}
+    {{on 'input' (set-from-event @model 'name')}}
+    as |F|
   >
+    <F.Label>{{t 'form.name.label'}}</F.Label>
+    <F.HelperText>{{t 'form.name.help'}}</F.HelperText>
     {{#if @model.errors.name}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.name as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.input>
+  </Hds::Form::TextInput::Field>
 
-  <form.textarea
-    @name='description'
-    @type='description'
+  <Hds::Form::Textarea::Field
+    @isRequired={{false}}
+    @isOptional={{true}}
     @value={{@model.description}}
-    @label={{t 'form.description.label'}}
-    @helperText={{t 'form.description.help'}}
-    @error={{@model.errors.description}}
-    disabled={{@model.isSaving}}
-    readonly={{false}}
-    as |field|
+    @isInvalid={{@model.errors.description}}
+    name='description'
+    disabled={{form.disabled}}
+    as |F|
   >
+    <F.Label>{{t 'form.description.label'}}</F.Label>
+    <F.HelperText>{{t 'form.description.help'}}</F.HelperText>
     {{#if @model.errors.description}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.description as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.textarea>
+  </Hds::Form::Textarea::Field>
 
   {{#unless @model.isNew}}
     <fieldset
diff --git a/ui/admin/tests/acceptance/roles/create-test.js b/ui/admin/tests/acceptance/roles/create-test.js
index 80cdce6fc..5268b3918 100644
--- a/ui/admin/tests/acceptance/roles/create-test.js
+++ b/ui/admin/tests/acceptance/roles/create-test.js
@@ -126,6 +126,6 @@ module('Acceptance | roles | create', function (hooks) {
     await click('form [type="submit"]');
     await a11yAudit();
     assert.ok(find('[role="alert"]'));
-    assert.ok(find('.rose-form-error-message'));
+    assert.ok(find('.hds-form-error__message'));
   });
 });
diff --git a/ui/admin/tests/acceptance/roles/update-test.js b/ui/admin/tests/acceptance/roles/update-test.js
index 95486e164..71b17ae5d 100644
--- a/ui/admin/tests/acceptance/roles/update-test.js
+++ b/ui/admin/tests/acceptance/roles/update-test.js
@@ -113,7 +113,7 @@ module('Acceptance | roles | update', function (hooks) {
       'Displays primary error message.'
     );
     assert.strictEqual(
-      find('.rose-form-error-message').textContent.trim(),
+      find('.hds-form-error__message').textContent.trim(),
       'Name is required.',
       'Displays field-level errors.'
     );