diff --git a/CHANGELOG.md b/CHANGELOG.md
index 55fc299..bf64854 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Change Log
 
+## 2.1.2
+
+* Add htmlFor/id attribute to labels associating them to inputs
+
 ## 2.1.1
 
 * Increase contrast in disabled mini button text
diff --git a/src/components/AutocompleteInput.jsx b/src/components/AutocompleteInput.jsx
index 135e27b..1aec5c7 100644
--- a/src/components/AutocompleteInput.jsx
+++ b/src/components/AutocompleteInput.jsx
@@ -480,6 +480,7 @@ export default class AutocompleteInput extends Component {
       asText,
       embedded,
       readOnly,
+      id,
     } = this.props;
 
     const {
@@ -492,6 +493,7 @@ export default class AutocompleteInput extends Component {
         readOnly={readOnly}
         value={getDisplayName(value)}
         embedded={embedded}
+        id={id}
       />
     );
   }
diff --git a/src/components/CheckboxInput.jsx b/src/components/CheckboxInput.jsx
index eeff357..93be7f7 100644
--- a/src/components/CheckboxInput.jsx
+++ b/src/components/CheckboxInput.jsx
@@ -116,14 +116,12 @@ export default class CheckboxInput extends Component {
       );
     }
 
-    // FIXME: Don't break jsx-a11y/label-has-associated-control.
-
     /* eslint-disable
-       jsx-a11y/label-has-associated-control,
+       jsx-a11y/no-static-element-interactions,
        jsx-a11y/no-noninteractive-element-interactions,
        jsx-a11y/click-events-have-key-events */
     return (
-      <label className={classes} onClick={onClick}>
+      <span className={classes} onClick={onClick}>
         <input
           checked={checked}
           data-name={name}
@@ -134,10 +132,10 @@ export default class CheckboxInput extends Component {
           {...remainingProps}
         />
         <span />
-      </label>
+      </span>
     );
     /* eslint-enable
-       jsx-a11y/label-has-associated-control,
+       jsx-a11y/no-static-element-interactions,
        jsx-a11y/no-noninteractive-element-interactions,
        jsx-a11y/click-events-have-key-events */
   }
diff --git a/src/components/CustomCompoundInput.jsx b/src/components/CustomCompoundInput.jsx
index a322649..2b72d26 100644
--- a/src/components/CustomCompoundInput.jsx
+++ b/src/components/CustomCompoundInput.jsx
@@ -6,11 +6,14 @@ import get from 'lodash/get';
 import { getPath, pathPropType } from '../helpers/pathHelpers';
 import { isInput } from '../helpers/inputHelpers';
 import styles from '../../styles/cspace-input/CompoundInput.css';
+import labelToLegend from '../helpers/labelToLegend';
 
 const propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   defaultChildSubpath: pathPropType,
+  id: PropTypes.string,
+  label: PropTypes.node,
   name: PropTypes.string,
   // TODO: Stop using propTypes in isInput. Until then, these unused props need to be declared so
   // this component is recognized as an input.
@@ -29,10 +32,12 @@ const defaultProps = {
   children: undefined,
   className: undefined,
   defaultChildSubpath: undefined,
+  label: undefined,
   name: undefined,
   parentPath: undefined,
   subpath: undefined,
   readOnly: undefined,
+  id: undefined,
   value: {},
 };
 
@@ -62,6 +67,7 @@ export default class CustomCompoundInput extends Component {
   decorateInputs(children) {
     const {
       readOnly,
+      id: parentId,
     } = this.props;
 
     return React.Children.map(children, (child) => {
@@ -88,12 +94,19 @@ export default class CustomCompoundInput extends Component {
           subpath = defaultChildSubpath;
         }
 
-        return React.cloneElement(child, {
+        const overrides = {
           readOnly,
           subpath,
           parentPath: getPath(this.props),
           value: getChildValue(value, subpath, name),
-        });
+        };
+
+        // Propagate id to inputs that don't have one
+        if (!child.props.id && parentId && name) {
+          overrides.id = `${parentId}-${name}`;
+        }
+
+        return React.cloneElement(child, overrides);
       }
 
       return React.cloneElement(child, {
@@ -106,6 +119,7 @@ export default class CustomCompoundInput extends Component {
     const {
       children,
       className,
+      label,
       name,
       readOnly,
     } = this.props;
@@ -114,11 +128,14 @@ export default class CustomCompoundInput extends Component {
       [styles.readOnly]: readOnly,
     });
 
+    const legend = labelToLegend(label);
+
     return (
       <fieldset
         className={classes}
         data-name={name}
       >
+        {legend}
         {this.decorateInputs(children)}
       </fieldset>
     );
@@ -127,3 +144,4 @@ export default class CustomCompoundInput extends Component {
 
 CustomCompoundInput.propTypes = propTypes;
 CustomCompoundInput.defaultProps = defaultProps;
+CustomCompoundInput.useLegend = true;
diff --git a/src/components/InputTable.jsx b/src/components/InputTable.jsx
index 81cda21..3aed2c7 100644
--- a/src/components/InputTable.jsx
+++ b/src/components/InputTable.jsx
@@ -3,10 +3,13 @@ import PropTypes from 'prop-types';
 import InputTableHeader from './InputTableHeader';
 import InputTableRow from './InputTableRow';
 import styles from '../../styles/cspace-input/InputTable.css';
+import labelToLegend from '../helpers/labelToLegend';
 
 const propTypes = {
   children: PropTypes.node,
   embedded: PropTypes.bool,
+  id: PropTypes.string,
+  label: PropTypes.node,
   renderLabel: PropTypes.func,
   renderAriaLabel: PropTypes.func,
 };
@@ -14,6 +17,8 @@ const propTypes = {
 const defaultProps = {
   children: undefined,
   embedded: undefined,
+  id: undefined,
+  label: undefined,
   renderLabel: undefined,
   renderAriaLabel: undefined,
 };
@@ -22,12 +27,17 @@ export default function InputTable(props) {
   const {
     children,
     embedded,
+    id,
+    label,
     renderLabel,
     renderAriaLabel,
   } = props;
 
+  const legend = labelToLegend(label);
+
   return (
-    <div className={styles.common}>
+    <fieldset className={styles.common} id={id}>
+      {legend}
       <InputTableHeader embedded={embedded} renderLabel={renderLabel}>
         {children}
       </InputTableHeader>
@@ -35,9 +45,10 @@ export default function InputTable(props) {
       <InputTableRow embedded={embedded} renderAriaLabel={renderAriaLabel}>
         {children}
       </InputTableRow>
-    </div>
+    </fieldset>
   );
 }
 
 InputTable.propTypes = propTypes;
 InputTable.defaultProps = defaultProps;
+InputTable.useLegend = true;
diff --git a/src/components/Label.jsx b/src/components/Label.jsx
index 9e47cbf..46c5733 100644
--- a/src/components/Label.jsx
+++ b/src/components/Label.jsx
@@ -6,12 +6,16 @@ const propTypes = {
   children: PropTypes.node,
   readOnly: PropTypes.bool,
   required: PropTypes.bool,
+  htmlFor: PropTypes.string,
+  id: PropTypes.string,
 };
 
 const defaultProps = {
   children: undefined,
   readOnly: undefined,
   required: undefined,
+  htmlFor: undefined,
+  id: undefined,
 };
 
 /**
@@ -22,14 +26,14 @@ export default function Label(props) {
     children,
     readOnly,
     required,
+    htmlFor,
+    id,
   } = props;
 
   const className = (required && !readOnly) ? styles.required : styles.common;
 
   return (
-    // FIXME: Set the htmlFor prop to associate the labeled control.
-    // eslint-disable-next-line jsx-a11y/label-has-associated-control
-    <label className={className}>
+    <label className={className} htmlFor={htmlFor} id={id}>
       {children}
     </label>
   );
diff --git a/src/components/RepeatingInput.jsx b/src/components/RepeatingInput.jsx
index 752e541..72e7eef 100644
--- a/src/components/RepeatingInput.jsx
+++ b/src/components/RepeatingInput.jsx
@@ -8,9 +8,11 @@ import { getPath, pathPropType } from '../helpers/pathHelpers';
 import miniButtonContainerStyles from '../../styles/cspace-input/MiniButtonContainer.css';
 import moveToTopButtonStyles from '../../styles/cspace-input/MoveToTopButton.css';
 import styles from '../../styles/cspace-input/RepeatingInput.css';
+import labelToLegend from '../helpers/labelToLegend';
 
 const propTypes = {
   children: PropTypes.node,
+  id: PropTypes.string,
   name: PropTypes.string,
   /* eslint-disable react/no-unused-prop-types */
   parentPath: pathPropType,
@@ -38,6 +40,7 @@ const propTypes = {
 
 const defaultProps = {
   children: undefined,
+  id: undefined,
   name: undefined,
   parentPath: undefined,
   subpath: undefined,
@@ -77,7 +80,7 @@ const normalizeValue = (value) => {
   return normalized;
 };
 
-const renderHeader = (label) => label;
+const renderHeader = (label) => labelToLegend(label);
 
 export default class RepeatingInput extends Component {
   constructor(props) {
@@ -252,6 +255,7 @@ export default class RepeatingInput extends Component {
 
     const template = React.Children.only(children);
     const normalizedValue = normalizeValue(value);
+    const templateId = template.props.id;
 
     return normalizedValue.map((instanceValue, index, list) => {
       const instanceName = `${index}`;
@@ -264,6 +268,7 @@ export default class RepeatingInput extends Component {
         name: instanceName,
         parentPath: getPath(this.props),
         value: instanceValue,
+        id: templateId ? `${templateId}-${instanceName}` : undefined,
         // The template is expected to accept an onCommit prop.
         onCommit: this.handleInstanceCommit,
       };
@@ -347,6 +352,7 @@ export default class RepeatingInput extends Component {
   render() {
     const {
       asText,
+      id,
       name,
       readOnly,
     } = this.props;
@@ -387,6 +393,7 @@ export default class RepeatingInput extends Component {
       <fieldset
         className={className}
         data-name={name}
+        id={id}
       >
         {isLabelEmbedded ? null : renderHeader(label)}
 
diff --git a/src/components/TabularCompoundInput.jsx b/src/components/TabularCompoundInput.jsx
index eef3f9c..c07c287 100644
--- a/src/components/TabularCompoundInput.jsx
+++ b/src/components/TabularCompoundInput.jsx
@@ -6,6 +6,7 @@ import InputTableHeader from './InputTableHeader';
 import labelable from '../enhancers/labelable';
 import repeatable from '../enhancers/repeatable';
 import { getPath } from '../helpers/pathHelpers';
+import labelToLegend from '../helpers/labelToLegend';
 
 const BaseComponent = repeatable(labelable(CustomCompoundInput));
 
@@ -15,6 +16,7 @@ const propTypes = {
   // eslint-disable-next-line react/forbid-foreign-prop-types
   ...BaseComponent.propTypes,
   children: PropTypes.node,
+  label: PropTypes.node,
   repeating: PropTypes.bool,
   sortableFields: PropTypes.objectOf(PropTypes.bool),
   onSortInstances: PropTypes.func,
@@ -23,6 +25,7 @@ const propTypes = {
 
 const defaultProps = {
   children: undefined,
+  label: undefined,
   repeating: undefined,
   sortableFields: undefined,
   onSortInstances: undefined,
@@ -49,6 +52,7 @@ export default class TabularCompoundInput extends Component {
   render() {
     const {
       children,
+      label,
       repeating,
       renderChildInputLabel,
       sortableFields,
@@ -66,20 +70,26 @@ export default class TabularCompoundInput extends Component {
       </InputTableHeader>
     );
 
+    const legend = labelToLegend(label);
+
     return (
-      <BaseComponent
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...remainingProps}
-        label={tableHeader}
-        repeating={repeating}
-      >
-        <InputTableRow embedded={repeating}>
-          {children}
-        </InputTableRow>
-      </BaseComponent>
+      <>
+        {legend}
+        <BaseComponent
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          {...remainingProps}
+          label={tableHeader}
+          repeating={repeating}
+        >
+          <InputTableRow embedded={repeating}>
+            {children}
+          </InputTableRow>
+        </BaseComponent>
+      </>
     );
   }
 }
 
 TabularCompoundInput.propTypes = propTypes;
 TabularCompoundInput.defaultProps = defaultProps;
+TabularCompoundInput.useLegend = true;
diff --git a/src/enhancers/labelable.jsx b/src/enhancers/labelable.jsx
index 5e39ece..60697a6 100644
--- a/src/enhancers/labelable.jsx
+++ b/src/enhancers/labelable.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import normalizeLabel from '../helpers/normalizeLabel';
+import Label from '../components/Label';
 
 /**
  * Makes an input component labelable. Returns an enhanced component that accepts a label prop. If
@@ -8,6 +9,11 @@ import normalizeLabel from '../helpers/normalizeLabel';
  * label. If the label is a string, it is wrapped in a Label; otherwise, it is rendered as given.
  * If no label is supplied, the base component is returned unchanged. A msgkey prop is also
  * accepted, but has no effect. It may be used by preprocessors to generate a label.
+ * If BaseComponent contains a static `useLegend = true` and the label is a Label element
+ * (or a string that is normalized to one), the label is forwarded to BaseComponent as the
+ *  `label` prop The BaseComponent is expected to render the label as a `<legend>`
+ *  inside its own `<fieldset>`.
+ *
  * @param {string|function} BaseComponent - The component to enhance.
  * @returns {function} The enhanced component.
  */
@@ -45,23 +51,39 @@ export default function labelable(BaseComponent) {
 
     const {
       readOnly,
+      id,
     } = props;
 
-    const normalizedLabel = normalizeLabel(label, { required, readOnly });
+    const labelId = id ? `${id}-label` : undefined;
 
-    const baseComponent = (
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      <BaseComponent {...remainingProps} />
-    );
+    const normalizedLabel = normalizeLabel(label, {
+      required,
+      readOnly,
+      htmlFor: id,
+      id: labelId,
+    });
 
     if (!normalizedLabel) {
-      return baseComponent;
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      return <BaseComponent {...remainingProps} />;
+    }
+
+    if (
+      BaseComponent.useLegend
+      && React.isValidElement(normalizedLabel)
+      && normalizedLabel.type === Label
+    ) {
+      return (
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        <BaseComponent {...remainingProps} label={normalizedLabel} />
+      );
     }
 
     return (
       <div>
         {normalizedLabel}
-        {baseComponent}
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+        <BaseComponent {...remainingProps} />
       </div>
     );
   }
diff --git a/src/enhancers/repeatable.jsx b/src/enhancers/repeatable.jsx
index 310029a..8572a8b 100644
--- a/src/enhancers/repeatable.jsx
+++ b/src/enhancers/repeatable.jsx
@@ -73,6 +73,7 @@ export default function repeatable(BaseComponent) {
         onCommit={onCommit}
         onMoveInstance={onMoveInstance}
         onRemoveInstance={onRemoveInstance}
+        id={baseProps.id}
       >
         {/* eslint-disable-next-line react/jsx-props-no-spreading */}
         <BaseComponent {...baseProps} />
diff --git a/src/helpers/labelToLegend.jsx b/src/helpers/labelToLegend.jsx
new file mode 100644
index 0000000..455d333
--- /dev/null
+++ b/src/helpers/labelToLegend.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import Label from '../components/Label';
+import labelStyles from '../../styles/cspace-input/Label.css';
+
+// Extract the label's children, className, id
+// and render it as legend instead of an orphaned label
+export default function labelToLegend(label) {
+  if (!label) {
+    return null;
+  }
+
+  if (React.isValidElement(label) && label.type === Label) {
+    const { required, readOnly } = label.props;
+    const className = (required && !readOnly) ? labelStyles.required : labelStyles.common;
+
+    return (
+      <legend className={className} id={label.props.id}>
+        {label.props.children}
+      </legend>
+    );
+  }
+
+  return <legend>{label}</legend>;
+}
diff --git a/src/helpers/normalizeLabel.jsx b/src/helpers/normalizeLabel.jsx
index 717ee33..0a399d2 100644
--- a/src/helpers/normalizeLabel.jsx
+++ b/src/helpers/normalizeLabel.jsx
@@ -2,6 +2,27 @@ import React from 'react';
 import Label from '../components/Label';
 
 export default function normalizeLabel(label, props) {
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  return (label && typeof label === 'string') ? <Label {...props}>{label}</Label> : label;
+  if (label && typeof label === 'string') {
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <Label {...props}>{label}</Label>;
+  }
+
+  if (props && React.isValidElement(label) && label.type === Label) {
+    const { htmlFor, id } = props;
+    const overrides = {};
+
+    if (htmlFor && !label.props.htmlFor) {
+      overrides.htmlFor = htmlFor;
+    }
+
+    if (id && !label.props.id) {
+      overrides.id = id;
+    }
+
+    if (Object.keys(overrides).length > 0) {
+      return React.cloneElement(label, overrides);
+    }
+  }
+
+  return label;
 }
diff --git a/styles/cspace-input/CheckboxInput.css b/styles/cspace-input/CheckboxInput.css
index 6a61465..b797043 100644
--- a/styles/cspace-input/CheckboxInput.css
+++ b/styles/cspace-input/CheckboxInput.css
@@ -7,9 +7,12 @@
 
 .common > input {
   position: absolute;
-  width: 1px;
-  height: 1px;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
   opacity: 0;
+  cursor: pointer;
 }
 
 .common > input + span {
diff --git a/styles/cspace-input/InputTable.css b/styles/cspace-input/InputTable.css
index d269a54..40f3851 100644
--- a/styles/cspace-input/InputTable.css
+++ b/styles/cspace-input/InputTable.css
@@ -1,3 +1,6 @@
 .common {
-  margin-bottom: 10px;
+  margin: 0 0 10px;
+  border: none;
+  padding: 0;
+  min-width: 0;
 }
diff --git a/styles/cspace-input/Label.css b/styles/cspace-input/Label.css
index 40cd90c..c53ba9f 100644
--- a/styles/cspace-input/Label.css
+++ b/styles/cspace-input/Label.css
@@ -9,6 +9,14 @@
   color: textLabel;
 }
 
+/* When applied to a <legend> inside a <fieldset>, override the browser's special
+   legend-on-border positioning so it participates in normal block flow. */
+legend.common {
+  float: left;
+  width: 100%;
+  padding-inline: 0;
+}
+
 .required {
   composes: common;
 }
diff --git a/test/specs/components/CheckboxInput.spec.jsx b/test/specs/components/CheckboxInput.spec.jsx
index 089d92c..edc30a8 100644
--- a/test/specs/components/CheckboxInput.spec.jsx
+++ b/test/specs/components/CheckboxInput.spec.jsx
@@ -20,10 +20,10 @@ describe('CheckboxInput', () => {
     isInput(<CheckboxInput />).should.equal(true);
   });
 
-  it('should render as a label', function test() {
+  it('should render as a span', function test() {
     render(<CheckboxInput />, this.container);
 
-    this.container.firstElementChild.nodeName.should.equal('LABEL');
+    this.container.firstElementChild.nodeName.should.equal('SPAN');
   });
 
   it('should render with correct class', function test() {
diff --git a/test/specs/components/CompoundInput.spec.jsx b/test/specs/components/CompoundInput.spec.jsx
index 64bb88d..aba4723 100644
--- a/test/specs/components/CompoundInput.spec.jsx
+++ b/test/specs/components/CompoundInput.spec.jsx
@@ -57,15 +57,16 @@ describe('CompoundInput', () => {
         </CompoundInput>, this.container,
       );
 
+      const legends = this.container.querySelectorAll('legend');
       const labels = this.container.querySelectorAll('label');
 
-      labels[0].textContent.should.equal('Person');
-      labels[1].textContent.should.equal('First name');
-      labels[2].textContent.should.equal('Last name');
-      labels[3].textContent.should.equal('Address');
-      labels[4].textContent.should.equal('Street');
-      labels[5].textContent.should.equal('City');
-      labels[6].textContent.should.equal('State');
+      legends[0].textContent.should.equal('Person');
+      legends[1].textContent.should.equal('Address');
+      labels[0].textContent.should.equal('First name');
+      labels[1].textContent.should.equal('Last name');
+      labels[2].textContent.should.equal('Street');
+      labels[3].textContent.should.equal('City');
+      labels[4].textContent.should.equal('State');
 
       const inputs = this.container.querySelectorAll('input');
 
@@ -88,7 +89,7 @@ describe('CompoundInput', () => {
       result.type.displayName.should.contain('TabularCompoundInput');
     });
 
-    it('should render labels and values properly', function test() {
+    it('should render legend, labels and values properly', function test() {
       const value = {
         firstName: 'John',
         lastName: 'Doe',
@@ -112,15 +113,16 @@ describe('CompoundInput', () => {
         </CompoundInput>, this.container,
       );
 
+      const legend = this.container.querySelector('legend');
       const labels = this.container.querySelectorAll('label');
 
-      labels[0].textContent.should.equal('Person');
-      labels[1].textContent.should.equal('First name');
-      labels[2].textContent.should.equal('Last name');
-      labels[3].textContent.should.equal('Address');
-      labels[4].textContent.should.equal('Street');
-      labels[5].textContent.should.equal('City');
-      labels[6].textContent.should.equal('State');
+      legend.textContent.should.equal('Person');
+      labels[0].textContent.should.equal('First name');
+      labels[1].textContent.should.equal('Last name');
+      labels[2].textContent.should.equal('Address');
+      labels[3].textContent.should.equal('Street');
+      labels[4].textContent.should.equal('City');
+      labels[5].textContent.should.equal('State');
 
       const inputs = this.container.querySelectorAll('input');
 
diff --git a/test/specs/components/InputTable.spec.jsx b/test/specs/components/InputTable.spec.jsx
index 29e8060..1595b71 100644
--- a/test/specs/components/InputTable.spec.jsx
+++ b/test/specs/components/InputTable.spec.jsx
@@ -14,14 +14,14 @@ describe('InputTable', () => {
     this.container = createTestContainer(this);
   });
 
-  it('should render as a div', function test() {
+  it('should render as a fieldset', function test() {
     render(
       <InputTable>
         <LineInput name="input1" label="test" />
       </InputTable>, this.container,
     );
 
-    this.container.firstElementChild.nodeName.should.equal('DIV');
+    this.container.firstElementChild.nodeName.should.equal('FIELDSET');
   });
 
   it('should render a header row and an input row', function test() {
diff --git a/test/specs/components/RepeatingInput.spec.jsx b/test/specs/components/RepeatingInput.spec.jsx
index 250ba9b..ecfacd6 100644
--- a/test/specs/components/RepeatingInput.spec.jsx
+++ b/test/specs/components/RepeatingInput.spec.jsx
@@ -264,7 +264,7 @@ describe('RepeatingInput', () => {
       </RepeatingInput>, this.container,
     );
 
-    this.container.querySelector('label').textContent.should.equal('Inner label');
+    this.container.querySelector('legend').textContent.should.equal('Inner label');
   });
 
   it('should render a repeating CustomCompoundInput', function test() {
diff --git a/test/specs/index.spec.jsx b/test/specs/index.spec.jsx
index b3bb6c1..8e876f1 100644
--- a/test/specs/index.spec.jsx
+++ b/test/specs/index.spec.jsx
@@ -250,17 +250,18 @@ describe('exported', () => {
   });
 
   describe('TabularCompoundInput', () => {
-    it('should render outer and inner labels', function test() {
+    it('should render outer legend and inner labels', function test() {
       render(
         <TabularCompoundInput label="Compound input label">
           <TextInput name="objectNumber" label="Inner label" />
         </TabularCompoundInput>, this.container,
       );
 
+      const legend = this.container.querySelector('legend');
       const labels = this.container.querySelectorAll('label');
 
-      labels[0].textContent.should.equal('Compound input label');
-      labels[1].textContent.should.equal('Inner label');
+      legend.textContent.should.equal('Compound input label');
+      labels[0].textContent.should.equal('Inner label');
     });
 
     it('should render when no labels are supplied', function test() {