diff --git a/ui/app/components/wrap-ttl.js b/ui/app/components/wrap-ttl.js
index 7ef473f5e0a2..a1ebde474417 100644
--- a/ui/app/components/wrap-ttl.js
+++ b/ui/app/components/wrap-ttl.js
@@ -8,7 +8,7 @@ export default Component.extend({
   onChange: null,
   wrapResponse: true,
 
-  ttl: null,
+  ttl: '30m',
 
   wrapTTL: computed('wrapResponse', 'ttl', function() {
     const { wrapResponse, ttl } = this.getProperties('wrapResponse', 'ttl');
@@ -27,30 +27,22 @@ export default Component.extend({
 
   layout: hbs`
     <div class="field">
-      <div class="b-checkbox">
-        <input
-          id="wrap-response"
-          class="styled"
-          name="wrap-response"
-          type="checkbox"
-          checked={{wrapResponse}}
-          onchange={{action 'changedValue' 'wrapResponse'}}
-          />
-        <label for="wrap-response" class="is-label">
-          Wrap response
-        </label>
-      </div>
-      {{#if wrapResponse}}
-        {{ttl-picker data-test-wrap-ttl-picker=true labelText='Wrap TTL' onChange=(action (mut ttl))}}
-      {{/if}}
+      {{ttl-picker2
+        data-test-wrap-ttl-picker=true
+        label='Wrap response'
+        helperTextDisabled='Will not wrap response'
+        helperTextEnabled='Will wrap response with a lease of'
+        enableTTL=wrapResponse
+        initialValue=ttl
+        onChange=(action 'changedValue')
+      }}
     </div>
   `,
 
   actions: {
-    changedValue(key, event) {
-      const { type, value, checked } = event.target;
-      const val = type === 'checkbox' ? checked : value;
-      set(this, key, val);
+    changedValue(ttlObj) {
+      set(this, 'wrapResponse', ttlObj.enabled);
+      set(this, 'ttl', `${ttlObj.seconds}s`);
       get(this, 'onChange')(get(this, 'wrapTTL'));
     },
   },
diff --git a/ui/tests/integration/components/transit-key-actions-test.js b/ui/tests/integration/components/transit-key-actions-test.js
index 4dfb89ee63b6..cd00898ecb97 100644
--- a/ui/tests/integration/components/transit-key-actions-test.js
+++ b/ui/tests/integration/components/transit-key-actions-test.js
@@ -280,8 +280,7 @@ module('Integration | Component | transit key actions', function(hooks) {
     const response = { keys: { a: 'key' } };
     this.set('storeService.keyActionReturnVal', response);
     await setupExport.call(this);
-    await click('#wrap-response');
-    await triggerEvent('#wrap-response', 'change');
+    await click('[data-test-toggle-label="Wrap response"]');
     await click('button[type="submit"]');
     assert.dom('.modal.is-active').exists('Modal opens after export');
     assert.deepEqual(
@@ -295,8 +294,7 @@ module('Integration | Component | transit key actions', function(hooks) {
     const response = { keys: { a: 'key' } };
     this.set('storeService.keyActionReturnVal', response);
     await setupExport.call(this);
-    await click('#wrap-response');
-    await triggerEvent('#wrap-response', 'change');
+    await click('[data-test-toggle-label="Wrap response"]');
     await click('#exportVersion');
     await triggerEvent('#exportVersion', 'change');
     await click('button[type="submit"]');
diff --git a/ui/tests/integration/components/wrap-ttl-test.js b/ui/tests/integration/components/wrap-ttl-test.js
index ba1c02e2a834..26fc9560a1f6 100644
--- a/ui/tests/integration/components/wrap-ttl-test.js
+++ b/ui/tests/integration/components/wrap-ttl-test.js
@@ -1,6 +1,6 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, click, fillIn, blur, find, triggerEvent } from '@ember/test-helpers';
+import { render, click, fillIn, find } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 import waitForError from 'vault/tests/helpers/wait-for-error';
 
@@ -24,28 +24,25 @@ module('Integration | Component | wrap ttl', function(hooks) {
   test('it renders', async function(assert) {
     await render(hbs`{{wrap-ttl onChange=(action onChange)}}`);
     assert.equal(this.lastOnChangeCall, '30m', 'calls onChange with 30m default on first render');
-    assert.equal(find('label[for=wrap-response]').textContent.trim(), 'Wrap response');
+    // await this.pauseTest();
+    assert.equal(
+      find('label[for="toggle-Wrapresponse"] .ttl-picker-label').textContent.trim(),
+      'Wrap response'
+    );
   });
 
   test('it nulls out value when you uncheck wrapResponse', async function(assert) {
     await render(hbs`{{wrap-ttl onChange=(action onChange)}}`);
-    await click('#wrap-response');
-    await triggerEvent('#wrap-response', 'change');
+    await click('[data-test-toggle-label="Wrap response"]');
     assert.equal(this.lastOnChangeCall, null, 'calls onChange with null');
   });
 
   test('it sends value changes to onChange handler', async function(assert) {
     await render(hbs`{{wrap-ttl onChange=(action onChange)}}`);
-
-    await fillIn('[data-test-wrap-ttl-picker] input', '20');
-    assert.equal(this.lastOnChangeCall, '20m', 'calls onChange correctly on time input');
-
+    // for testing purposes we need to input unit first because it keeps seconds value
     await fillIn('[data-test-select="ttl-unit"]', 'h');
-    await blur('[data-test-select="ttl-unit"]');
-    assert.equal(this.lastOnChangeCall, '20h', 'calls onChange correctly on unit change');
-
-    await fillIn('[data-test-select="ttl-unit"]', 'd');
-    await blur('[data-test-select="ttl-unit"]');
-    assert.equal(this.lastOnChangeCall, '480h', 'converts days to hours correctly');
+    assert.equal(this.lastOnChangeCall, '1800s', 'calls onChange correctly on time input');
+    await fillIn('[data-test-ttl-value="Wrap response"]', '20');
+    assert.equal(this.lastOnChangeCall, '72000s', 'calls onChange correctly on unit change');
   });
 });