diff --git a/jupyter-js-widgets/css/widgets-base.css b/jupyter-js-widgets/css/widgets-base.css
index 0536f8ba30..a57d3d8191 100644
--- a/jupyter-js-widgets/css/widgets-base.css
+++ b/jupyter-js-widgets/css/widgets-base.css
@@ -261,6 +261,11 @@
 
 /* Widget Label Styling */
 
+/* Override Bootstrap label css */
+.jupyter-widgets label.widget-label {
+    margin-bottom: initial;
+}
+
 .widget-label-basic {
     /* Basic Label */
     color: var(--jp-widgets-label-color);
diff --git a/jupyter-js-widgets/src/widget_color.ts b/jupyter-js-widgets/src/widget_color.ts
index 7d29c51d16..483d11c149 100644
--- a/jupyter-js-widgets/src/widget_color.ts
+++ b/jupyter-js-widgets/src/widget_color.ts
@@ -9,6 +9,10 @@ import {
     DescriptionView
 } from './widget_description';
 
+import {
+    uuid
+} from './utils';
+
 import * as _ from 'underscore';
 
 
@@ -38,6 +42,7 @@ class ColorPickerView extends DescriptionView {
 
         this._textbox = document.createElement('input');
         this._textbox.setAttribute('type', 'text');
+        this._textbox.id = this.label.htmlFor = uuid();
 
         this._color_container.appendChild(this._textbox);
         this._textbox.value = this.model.get('value');
diff --git a/jupyter-js-widgets/src/widget_date.ts b/jupyter-js-widgets/src/widget_date.ts
index 89886b0cb4..70c71d01c3 100644
--- a/jupyter-js-widgets/src/widget_date.ts
+++ b/jupyter-js-widgets/src/widget_date.ts
@@ -9,6 +9,10 @@ import {
     CoreDescriptionModel
 } from './widget_core';
 
+import {
+    uuid
+} from './utils';
+
 import {
     ManagerBase
 } from './manager-base'
@@ -86,6 +90,8 @@ class DatePickerView extends DescriptionView {
 
         this._datepicker = document.createElement('input');
         this._datepicker.setAttribute('type', 'date');
+        this._datepicker.id = this.label.htmlFor = uuid();
+
         this.el.appendChild(this._datepicker);
 
         this.listenTo(this.model, 'change:value', this._update_value);
diff --git a/jupyter-js-widgets/src/widget_description.ts b/jupyter-js-widgets/src/widget_description.ts
index b1ee11bc6f..affdb9f899 100644
--- a/jupyter-js-widgets/src/widget_description.ts
+++ b/jupyter-js-widgets/src/widget_description.ts
@@ -39,7 +39,7 @@ export
 class DescriptionView extends DOMWidgetView {
 
     render() {
-        this.label = document.createElement('div');
+        this.label = document.createElement('label');
         this.el.appendChild(this.label);
         this.label.className = 'widget-label';
         this.label.style.display = 'none';
@@ -60,7 +60,7 @@ class DescriptionView extends DOMWidgetView {
         this.label.title = description;
     }
 
-    label: HTMLDivElement;
+    label: HTMLLabelElement;
 }
 
 /**
diff --git a/jupyter-js-widgets/src/widget_int.ts b/jupyter-js-widgets/src/widget_int.ts
index 971d4d385a..51583f1b56 100644
--- a/jupyter-js-widgets/src/widget_int.ts
+++ b/jupyter-js-widgets/src/widget_int.ts
@@ -13,6 +13,10 @@ import {
     DOMWidgetView
 } from './widget';
 
+import {
+    uuid
+} from './utils';
+
 import * as _ from 'underscore';
 import * as $ from 'jquery';
 import 'jquery-ui/ui/widgets/slider';
@@ -485,6 +489,7 @@ class IntTextView extends DescriptionView {
 
         this.textbox = document.createElement('input');
         this.textbox.setAttribute('type', 'text');
+        this.textbox.id = this.label.htmlFor = uuid();
         this.el.appendChild(this.textbox);
 
         this.update(); // Set defaults.
diff --git a/jupyter-js-widgets/src/widget_selection.ts b/jupyter-js-widgets/src/widget_selection.ts
index 2ea76567ef..a8d0f4a165 100644
--- a/jupyter-js-widgets/src/widget_selection.ts
+++ b/jupyter-js-widgets/src/widget_selection.ts
@@ -9,6 +9,10 @@ import {
     DescriptionView
 } from './widget_description';
 
+import {
+    uuid
+} from './utils';
+
 import {
     unpack_models, ViewList
 } from './widget';
@@ -78,6 +82,7 @@ class DropdownView extends DescriptionView {
         this.el.classList.add('widget-dropdown');
 
         this.listbox = document.createElement('select');
+        this.listbox.id = this.label.htmlFor = uuid();
         this.el.appendChild(this.listbox);
         this._updateOptions();
         this.update();
@@ -160,6 +165,7 @@ class SelectView extends DescriptionView {
         this.el.classList.add('widget-select');
 
         this.listbox = document.createElement('select');
+        this.listbox.id = this.label.htmlFor = uuid();
         this.el.appendChild(this.listbox);
         this._updateOptions();
         this.update();
diff --git a/jupyter-js-widgets/src/widget_string.ts b/jupyter-js-widgets/src/widget_string.ts
index 6e19d12508..883c26ca7f 100644
--- a/jupyter-js-widgets/src/widget_string.ts
+++ b/jupyter-js-widgets/src/widget_string.ts
@@ -9,6 +9,10 @@ import {
     DescriptionView
 } from './widget_description';
 
+import {
+    uuid
+} from './utils';
+
 import * as _ from 'underscore';
 
 export
@@ -160,6 +164,7 @@ class TextareaView extends DescriptionView {
 
         this.textbox = document.createElement('textarea');
         this.textbox.setAttribute('rows', '5');
+        this.textbox.id = this.label.htmlFor = uuid();
         this.el.appendChild(this.textbox);
 
         this.update(); // Set defaults.
@@ -278,6 +283,7 @@ class TextView extends DescriptionView {
 
         this.textbox = document.createElement('input');
         this.textbox.setAttribute('type', this.inputType);
+        this.textbox.id = this.label.htmlFor = uuid();
         this.el.appendChild(this.textbox);
 
         this.update(); // Set defaults.