diff --git a/components/checkbox/Checkbox.js b/components/checkbox/Checkbox.js
index a17a2ac64..ebd6e9be0 100644
--- a/components/checkbox/Checkbox.js
+++ b/components/checkbox/Checkbox.js
@@ -10,6 +10,7 @@ import checkFactory from './Check';
 
 const factory = (Check) => {
   class Checkbox extends Component {
+
     static propTypes = {
       checked: PropTypes.bool,
       children: PropTypes.node,
@@ -38,6 +39,11 @@ const factory = (Check) => {
       disabled: false,
     };
 
+    constructor(props) {
+      super(props);
+      this._id = uuidv4();
+    }
+
     handleToggle = (event) => {
       if (event.pageX !== 0 && event.pageY !== 0) this.blur();
       if (!this.props.disabled && this.props.onChange) {
@@ -63,8 +69,8 @@ const factory = (Check) => {
       const className = classnames(theme.field, {
         [theme.disabled]: this.props.disabled,
       }, this.props.className);
-      const inputId = `input_${uuidv4()}`;
-      const labelId = `label_${uuidv4()}`;
+      const inputId = `input_${this._id}`;
+      const labelId = `label_${this._id}`;
 
       return (
         <label
diff --git a/components/input/Input.d.ts b/components/input/Input.d.ts
index dc12e0fcf..aca7e4c2f 100644
--- a/components/input/Input.d.ts
+++ b/components/input/Input.d.ts
@@ -10,6 +10,10 @@ export interface InputTheme {
    * Used for the counter element.
    */
   counter?: string;
+  /**
+   * Used for the description element.
+   */
+  description?: string;
   /**
    * Added to the root class when input is disabled.
    */
@@ -66,6 +70,10 @@ export interface InputProps extends ReactToolbox.Props {
    * @default false
    */
   disabled?: boolean;
+  /**
+   * Text string to use for description element.
+   */
+  description?: string;
   /**
    * Give an error node to display under the field.
    */
diff --git a/components/input/Input.js b/components/input/Input.js
index 9e6757484..271eda765 100644
--- a/components/input/Input.js
+++ b/components/input/Input.js
@@ -11,6 +11,7 @@ const factory = (FontIcon) => {
       children: PropTypes.node,
       className: PropTypes.string,
       defaultValue: PropTypes.string,
+      description: PropTypes.string,
       disabled: PropTypes.bool,
       error: PropTypes.oneOfType([
         PropTypes.string,
@@ -42,6 +43,7 @@ const factory = (FontIcon) => {
       theme: PropTypes.shape({
         bar: PropTypes.string,
         counter: PropTypes.string,
+        description: PropTypes.string,
         disabled: PropTypes.string,
         error: PropTypes.string,
         errored: PropTypes.string,
@@ -161,15 +163,15 @@ const factory = (FontIcon) => {
 
     valuePresent = value => (
       value !== null
-        && value !== undefined
-        && value !== ''
-        && !(typeof value === 'number' && isNaN(value))
+      && value !== undefined
+      && value !== ''
+      && !(typeof value === 'number' && isNaN(value))
     )
 
     render() {
-      const { children, defaultValue, disabled, error, floating, hint, icon,
-              name, label: labelText, maxLength, multiline, required, role,
-              theme, type, value, onKeyPress, rows = 1, ...others } = this.props;
+      const { children, defaultValue, description, disabled, error, floating, hint, icon,
+        name, label: labelText, maxLength, multiline, required, role,
+        theme, type, value, onKeyPress, rows = 1, ...others } = this.props;
       const length = maxLength && value ? value.length : 0;
       const labelClassName = classnames(theme.label, { [theme.fixed]: !floating });
 
@@ -220,8 +222,22 @@ const factory = (FontIcon) => {
             </label>
             : null}
           {hint ? <span hidden={labelText} className={theme.hint}>{hint}</span> : null}
-          {error ? <span id={errorId} role="alert" className={theme.error}>{error}</span> : null}
+
           {maxLength ? <span className={theme.counter}>{length}/{maxLength}</span> : null}
+          {error
+            ? <span
+              id={errorId}
+              role="alert"
+              className={classnames(theme.error, { [theme.withCounter]: !!maxLength })}
+            >
+              {error}
+            </span>
+            : null}
+          {description
+            ? <span className={classnames(theme.description, { [theme.withCounter]: !!maxLength })}>
+              {description}
+            </span>
+            : null}
           {children}
         </div>
       );
diff --git a/components/input/theme.css b/components/input/theme.css
index a39cb8741..a4f3b0f4a 100644
--- a/components/input/theme.css
+++ b/components/input/theme.css
@@ -144,11 +144,20 @@
 }
 
 .error,
+.description,
 .counter {
-  color: var(--input-text-error-color);
   font-size: var(--input-label-font-size);
   line-height: var(--input-underline-height);
-  margin-bottom: calc(-1 * var(--input-underline-height));
+}
+
+.error {
+  color: var(--input-text-error-color);
+  display: block;
+}
+
+.description {
+  color: var(--input-text-label-color);
+  display: block;
 }
 
 .counter {
@@ -157,6 +166,10 @@
   right: 0;
 }
 
+.withCounter {
+  padding-right: 3.125rem;
+}
+
 .disabled > .inputElement {
   border-bottom-style: dotted;
   color: var(--input-text-disabled-text-color);
diff --git a/components/radio/RadioButton.js b/components/radio/RadioButton.js
index 4ae64ead4..7e765df97 100644
--- a/components/radio/RadioButton.js
+++ b/components/radio/RadioButton.js
@@ -9,6 +9,7 @@ import radioFactory from './Radio';
 
 const factory = (Radio) => {
   class RadioButton extends Component {
+
     static propTypes = {
       checked: PropTypes.bool,
       children: PropTypes.node,
@@ -39,6 +40,11 @@ const factory = (Radio) => {
       disabled: false,
     };
 
+    constructor(props) {
+      super(props);
+      this._id = uuidv4();
+    }
+
     handleClick = (event) => {
       const { checked, disabled, onChange } = this.props;
       if (event.pageX !== 0 && event.pageY !== 0) this.blur();
@@ -72,8 +78,8 @@ const factory = (Radio) => {
         ...others
       } = this.props;
       const _className = classnames(theme[this.props.disabled ? 'disabled' : 'field'], className);
-      const inputId = `input_${uuidv4()}`;
-      const labelId = `label_${uuidv4()}`;
+      const inputId = `input_${this._id}`;
+      const labelId = `label_${this._id}`;
 
       return (
         <label