diff --git a/.stylelintrc b/.stylelintrc
index 3f7dd4312..e325a63af 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -9,6 +9,8 @@
     "declaration-property-value-blacklist": null,
     "max-nesting-depth": null,
     "order/properties-alphabetical-order": null,
-    "selector-max-compound-selectors": 4
+    "selector-max-compound-selectors": 4,
+    "at-rule-no-unknown": null,
+    "scss/at-rule-no-unknown": true
   }
 }
diff --git a/src/components/SelectInput/SelectInput.module.scss b/src/components/SelectInput/SelectInput.module.scss
index 966d20ae9..8d8674749 100644
--- a/src/components/SelectInput/SelectInput.module.scss
+++ b/src/components/SelectInput/SelectInput.module.scss
@@ -31,24 +31,26 @@ react-select elements for which we do not own the markup */
       .react-select-icon {
         padding: 0;
         padding-right: 2px;
-        color: var(--form-control-select-icon-color);
+        color: var(--form-control-icon-color);
       
         &:hover {
-          color: var(--form-control-select-icon-hover-color)
-        }
-      
-        svg {
-          width: var(--form-control-select-icon-size);
-          height: var(--form-control-select-icon-size);
+          color: var(--form-control-icon-hover-color)
         }
       }
 
       :global(.react-select__dropdown-indicator) {
         @extend .react-select-icon;
+
+        svg {
+          width: var(--form-control-select-icon-size);
+          height: var(--form-control-select-icon-size);
+        }
       }
 
       :global(.react-select__clear-indicator) {
         @extend .react-select-icon;
+
+        margin-right: var(--form-control-select-clear-icon-margin);
       }
 
       &:global(.react-select__control--is-focused) {
diff --git a/src/components/SelectInput/SelectInput.tsx b/src/components/SelectInput/SelectInput.tsx
index 985bdabcc..2e5643d3a 100644
--- a/src/components/SelectInput/SelectInput.tsx
+++ b/src/components/SelectInput/SelectInput.tsx
@@ -1,6 +1,14 @@
 import React, { FC, FocusEvent, ReactNode } from 'react';
 import classNames from 'classnames';
-import Select, { ValueType, OptionTypeBase, FocusEventHandler } from 'react-select';
+import Select, {
+  components,
+  ValueType,
+  OptionTypeBase,
+  FocusEventHandler,
+  IndicatorProps,
+} from 'react-select';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import FormLabel from '../FormLabel/FormLabel';
 import InputValidationMessage from '../InputValidationMessage/InputValidationMessage';
 import styles from './SelectInput.module.scss';
@@ -144,12 +152,19 @@ const SelectInput: FC<SelectInputProps> = ({
     isDisabled,
   };
 
+  const ClearIndicator = (props: IndicatorProps<OptionTypeBase>) => (
+    <components.ClearIndicator {...props}>
+      <FontAwesomeIcon icon={faTimes} size="lg" />
+    </components.ClearIndicator>
+  );
+
   return (
     <div className={wrapperClasses}>
       {label && !hideLabel && <FormLabel {...labelProps}>{label}</FormLabel>}
       <Select
         inputId={id}
         aria-label={label}
+        components={{ ClearIndicator }}
         aria-labelledby={label && !hideLabel ? `${id}Label` : undefined}
         className={inputClasses}
         classNamePrefix="react-select"
diff --git a/src/components/TextInput/TextInput.module.scss b/src/components/TextInput/TextInput.module.scss
index 4ab786e4c..68ab6bb2b 100644
--- a/src/components/TextInput/TextInput.module.scss
+++ b/src/components/TextInput/TextInput.module.scss
@@ -1,5 +1,15 @@
-.text-input {
+%disabled-base {
+  background-color: var(--form-control-disabled-background-color);
+  color: var(--form-control-disabled-font-color);
+
+  &:hover {
+    cursor: not-allowed;
+  }
+}
+
+.text-input-wrapper {
   box-sizing: border-box;
+  display: flex;
   transition-duration: 300ms;
   transition-property: border, background-color;
   transition-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1);
@@ -7,29 +17,39 @@
   border-radius: var(--form-control-size-md-border-radius);
   box-shadow: 0 3px 0 rgba(0, 0, 0, 0.05);
   background-color: var(--form-control-background-color);
-  padding: var(--form-control-size-md-padding);
+  padding: calc(var(--form-control-size-md-padding) - 1px); /* Subtract 1 pixel here to account for nested input */
   width: 100%;
   line-height: var(--form-control-line-height);
   color: var(--form-control-font-color);
   font-size: var(--form-control-size-md-font-size);
 
-  &::placeholder {
-    opacity: 1;
-    /* Override lower placeholder opacity in Firefox */
-    color: var(--form-control-placeholder-color);
-  }
-
-  &:focus {
+  &:focus-within {
     outline: none;
     border-color: var(--form-control-focus-border-color);
   }
 
-  &:disabled {
-    background-color: var(--form-control-disabled-background-color);
-    color: var(--form-control-disabled-font-color);
+  &.disabled {
+    @extend %disabled-base;
+  }
+
+  > input {
+    border: none;
+    background-color: inherit;
+    width: 100%;
+    line-height: var(--form-control-line-height);
+
+    &::placeholder {
+      /* Override lower placeholder opacity in Firefox */
+      opacity: 1;
+      color: var(--form-control-placeholder-color);
+    }
+
+    &:focus {
+      outline: none;
+    }
 
-    &:hover {
-      cursor: not-allowed;
+    &:disabled {
+      @extend %disabled-base;
     }
   }
 
@@ -48,3 +68,26 @@
 .text-input-label {
   margin-bottom: var(--form-control-label-margin);
 }
+
+.clear-button {
+  /* Reset default button styles */
+  border: 0;
+  background: none;
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+  color: inherit;
+  font-style: inherit;
+}
+
+.clear-icon {
+  transition-duration: 0.2s;
+  transition-property: color;
+  cursor: pointer;
+  color: var(--form-control-icon-color);
+  font-size: var(--form-control-text-clear-icon-font-size);
+
+  &:hover {
+    color: var(--form-control-icon-hover-color);
+  }
+}
diff --git a/src/components/TextInput/TextInput.stories.mdx b/src/components/TextInput/TextInput.stories.mdx
index 92857c981..22bb4402c 100644
--- a/src/components/TextInput/TextInput.stories.mdx
+++ b/src/components/TextInput/TextInput.stories.mdx
@@ -200,6 +200,32 @@ Use the `isDisabled` prop to mark the input as disabled. Disabled inputs can hav
   </Story>
 </Canvas>
 
+
+## Clearable
+
+Use the `onClear` prop to display a clear icon (x) when the input has a value. `onClear` will fire
+a callback function when the clear icon is clicked, which can then be handled to clear the value.
+
+<Canvas>
+  <Story name="Clearable">
+    {() => {
+      const [value, setValue] = useState('clear me');
+      return (
+        <div style={{ height: '85px' }}>
+          <TextInput
+            id="required"
+            value={value}
+            label="Label"
+            onChange={event => setValue(event.target.value)}
+            onClear={event => setValue('')}
+            isRequired
+          />
+        </div>
+      );
+    }}
+  </Story>
+</Canvas>
+
 ## With Phone Mask
 
 Use the `type` prop to mark the input type as "tel". Use the `inputMask` prop to set the mask as "phone".
@@ -395,4 +421,3 @@ Use the `className` prop to add a custom class, or classes to an input.
 
 
 
-
diff --git a/src/components/TextInput/TextInput.test.jsx b/src/components/TextInput/TextInput.test.tsx
similarity index 50%
rename from src/components/TextInput/TextInput.test.jsx
rename to src/components/TextInput/TextInput.test.tsx
index 292adfa2e..0b93e6c6f 100644
--- a/src/components/TextInput/TextInput.test.jsx
+++ b/src/components/TextInput/TextInput.test.tsx
@@ -6,22 +6,23 @@ import {
 } from '@testing-library/react';
 import TextInput from './TextInput';
 
+const baseProps = {
+  name: 'firstName',
+  id: 'firstName',
+  label: 'first name',
+  value: 'hello',
+  onChange: () => null,
+  onClear: undefined,
+};
+
 describe('TextInput', () => {
   describe('Callback Handling', () => {
     describe('onChange', () => {
       test('onChange event fires callback function', () => {
         const mockedHandleChange = jest.fn(() => null);
 
-        render(
-          <TextInput
-            name="firstName"
-            id="firstName"
-            label="first name"
-            value="hello"
-            onChange={mockedHandleChange}
-          />,
-        );
-        const inputElement = screen.getByDisplayValue('hello');
+        render(<TextInput {...baseProps} onChange={mockedHandleChange} />);
+        const inputElement = screen.getByDisplayValue(baseProps.value);
 
         fireEvent.change(inputElement, { target: { value: 'good bye' } });
         expect(mockedHandleChange).toHaveBeenCalledTimes(1);
@@ -30,48 +31,47 @@ describe('TextInput', () => {
       test('Input value is updated properly when upper state changes', () => {
         let value = 'hello';
         const mockedHandleChange = jest.fn(event => { value = event.target.value; });
-        const { rerender } = render(
-          <TextInput
-            name="firstName"
-            id="firstName"
-            label="first name"
-            value={value}
-            onChange={mockedHandleChange}
-          />,
-        );
+        const { rerender } = render(<TextInput {...baseProps} value={value} onChange={mockedHandleChange} />);
 
-        const inputElement = screen.getByDisplayValue('hello');
+        const inputElement = screen.getByDisplayValue('hello') as HTMLInputElement;
         expect(inputElement.value).toBe('hello');
 
         fireEvent.change(inputElement, { target: { value: 'good bye' } });
         expect(mockedHandleChange).toHaveBeenCalledTimes(1);
 
-        rerender(
-          <TextInput
-            name="firstName"
-            id="firstName"
-            label="first name"
-            value={value}
-            onChange={mockedHandleChange}
-          />,
-        );
+        rerender(<TextInput {...baseProps} value={value} onChange={mockedHandleChange} />);
         expect(inputElement.value).toBe('good bye');
       });
     });
 
+    describe('onClear', () => {
+      test('onClear prop renders clear icon when input has value', () => {
+        render(<TextInput {...baseProps} onClear={() => null} />);
+        const clearButton = screen.getByTestId('text-input-clear-button');
+        expect(clearButton).toBeInTheDocument();
+      });
+
+      test('onClear event fires callback function', () => {
+        const mockedHandleClear = jest.fn(() => null);
+
+        render(<TextInput {...baseProps} onClear={mockedHandleClear} />);
+        const clearButton = screen.getByTestId('text-input-clear-button');
+        expect(clearButton).toBeInTheDocument();
+
+        fireEvent.click(clearButton);
+        expect(mockedHandleClear).toHaveBeenCalledTimes(1);
+        fireEvent.keyUp(clearButton, { keyCode: 13 });
+        expect(mockedHandleClear).toHaveBeenCalledTimes(2);
+        fireEvent.keyUp(clearButton, { keyCode: 99 });
+        expect(mockedHandleClear).toHaveBeenCalledTimes(2);
+      });
+    });
+
     describe('onFocus', () => {
       test('Input fires onFocus callback', () => {
         const mockedHandleFocus = jest.fn();
-        render(
-          <TextInput
-            label="test input"
-            id="testInput"
-            value="hello"
-            onChange={() => null}
-            onFocus={mockedHandleFocus}
-          />,
-        );
-        const inputElement = screen.getByDisplayValue('hello');
+        render(<TextInput {...baseProps} onFocus={mockedHandleFocus} />);
+        const inputElement = screen.getByDisplayValue(baseProps.value);
         fireEvent.focus(inputElement);
         expect(mockedHandleFocus).toBeCalledTimes(1);
       });
@@ -80,16 +80,8 @@ describe('TextInput', () => {
     describe('onBlur', () => {
       test('Input fires onBlur callback', () => {
         const mockedHandleBlur = jest.fn();
-        render(
-          <TextInput
-            label="test input"
-            id="testInput"
-            value="hello"
-            onChange={() => null}
-            onBlur={mockedHandleBlur}
-          />,
-        );
-        const inputElement = screen.getByDisplayValue('hello');
+        render(<TextInput {...baseProps} onBlur={mockedHandleBlur} />);
+        const inputElement = screen.getByDisplayValue(baseProps.value);
         fireEvent.focus(inputElement);
         fireEvent.blur(inputElement);
         expect(mockedHandleBlur).toBeCalledTimes(1);
@@ -100,16 +92,9 @@ describe('TextInput', () => {
   describe('States', () => {
     describe('Label', () => {
       test('it renders a label', () => {
-        render(
-          <TextInput
-            label="test input"
-            id="testInput"
-            value="hello"
-            onChange={() => null}
-          />,
-        );
+        render(<TextInput {...baseProps} />);
 
-        const labelElement = screen.getByText('test input');
+        const labelElement = screen.getByText(baseProps.label);
 
         expect(labelElement).toBeInTheDocument();
       });
@@ -117,53 +102,39 @@ describe('TextInput', () => {
 
     describe('Autofocused', () => {
       test('Input autofocuses if "autoFocus" prop is set to true', () => {
-        render(<TextInput label="test input" id="testInput" value="hello" onChange={() => null} autoFocus />);
-        const inputElement = screen.getByDisplayValue('hello');
+        render(<TextInput {...baseProps} autoFocus />);
+        const inputElement = screen.getByDisplayValue(baseProps.value);
         expect(document.activeElement).toEqual(inputElement);
       });
     });
 
     describe('Autocomplete', () => {
       test('Input correctly assigns autocomplete value of "on" when bool true is provided', () => {
-        render(<TextInput label="test input" id="testInput" value="hello" onChange={() => null} autoComplete />);
-        const inputElement = screen.getByDisplayValue('hello');
+        render(<TextInput {...baseProps} autoComplete />);
+        const inputElement = screen.getByDisplayValue(baseProps.value);
         expect(inputElement).toHaveAttribute('autocomplete', 'on');
       });
 
       test('Input correctly assigns autocomplete value of "off" when bool false is provided', () => {
         render(
-          <TextInput label="test input" id="testInput" value="hello" onChange={() => null} autoComplete={false} />,
+          <TextInput {...baseProps} autoComplete={false} />,
         );
         const inputElement = screen.getByDisplayValue('hello');
         expect(inputElement).toHaveAttribute('autocomplete', 'off');
       });
 
-      test('Input correctly assigns autocomplete value of "off" when incorrect type is provided', () => {
+      test('Input correctly assigns autocomplete specific value when provided', () => {
         render(
-          <TextInput
-            label="test input"
-            id="testInput"
-            value="hello"
-            onChange={() => null}
-            autoComplete={['a', 'random', 'array']}
-          />,
+          <TextInput {...baseProps} autoComplete="email" />,
         );
         const inputElement = screen.getByDisplayValue('hello');
-        expect(inputElement).toHaveAttribute('autocomplete', 'off');
+        expect(inputElement).toHaveAttribute('autocomplete', 'email');
       });
     });
 
     describe('Required', () => {
       test('it correctly assigns the "aria-required" attribute when "isRequired" prop is true', () => {
-        render(
-          <TextInput
-            label="test input"
-            id="testInput"
-            value="hello"
-            onChange={() => null}
-            isRequired
-          />,
-        );
+        render(<TextInput {...baseProps} isRequired />);
 
         const inputElement = screen.getByDisplayValue('hello');
 
@@ -171,17 +142,9 @@ describe('TextInput', () => {
       });
 
       test('it\'s label renders an asterisk indicating that it\'s required', () => {
-        render(
-          <TextInput
-            label="test input"
-            id="testInput"
-            value="hello"
-            onChange={() => null}
-            isRequired
-          />,
-        );
+        render(<TextInput {...baseProps} isRequired />);
 
-        const labelElement = screen.getByText('test input');
+        const labelElement = screen.getByText(baseProps.label);
 
         expect(labelElement).toHaveTextContent('*');
       });
@@ -189,31 +152,15 @@ describe('TextInput', () => {
 
     describe('Error', () => {
       test('the label renders in an error state', () => {
-        render(
-          <TextInput
-            label="test input"
-            value="hey"
-            onChange={() => null}
-            id="myId"
-            error="You silly goose"
-          />,
-        );
+        render(<TextInput {...baseProps} error="You silly goose" />);
 
-        const labelElement = screen.getByText('test input');
+        const labelElement = screen.getByText(baseProps.label);
 
         expect(labelElement.getAttribute('class')).toContain('error');
       });
 
       test('Input correctly displays error message if provided', () => {
-        render(
-          <TextInput
-            label="test input"
-            value="hey"
-            onChange={() => null}
-            id="myId"
-            error="You silly goose"
-          />,
-        );
+        render(<TextInput {...baseProps} error="You silly goose" />);
 
         const validationMessageElement = screen.getByText('You silly goose');
 
@@ -225,17 +172,10 @@ describe('TextInput', () => {
     describe('Max Length', () => {
       test('Input correctly passes maxlength property if prop is passed', async () => {
         render(
-          <TextInput
-            name="firstName"
-            id="firstName"
-            label="first name"
-            value=""
-            maxLength="3"
-            onChange={() => null}
-          />,
+          <TextInput {...baseProps} value="" maxLength={3} />,
         );
 
-        const inputElement = screen.getByLabelText('first name');
+        const inputElement = screen.getByLabelText(baseProps.label);
         expect(inputElement).toBeInTheDocument();
         expect(inputElement).toHaveAttribute('maxlength');
         expect(inputElement.getAttribute('maxlength')).toBe('3');
@@ -244,23 +184,29 @@ describe('TextInput', () => {
 
     describe('Aria-labelledby', () => {
       test('assigns the "aria-labelledby" attribute and renders label with correct id, when label is provided', () => {
-        render(<TextInput id="testInput" label="test label" value="hello" onChange={() => null} />);
-        const inputElement = screen.getByDisplayValue('hello');
-        expect(inputElement).toHaveAttribute('aria-labelledby', 'testInputLabel');
-        expect(document.getElementById('testInputLabel')).toBeInTheDocument();
+        render(<TextInput {...baseProps} />);
+        const inputElement = screen.getByDisplayValue(baseProps.value);
+        expect(inputElement).toHaveAttribute('aria-labelledby', `${baseProps.id}Label`);
+        expect(document.getElementById(baseProps.id)).toBeInTheDocument();
       });
 
       test('does not assign "aria-labelledby" attribute when a label is hidden', () => {
-        render(<TextInput
-          id="testInput"
-          label="hidden label"
-          hideLabel
-          value="hello"
-          onChange={() => null}
-        />);
-        const inputElement = screen.getByLabelText('hidden label');
+        render(<TextInput {...baseProps} hideLabel />);
+        const inputElement = screen.getByLabelText(baseProps.label);
         expect(inputElement).not.toHaveAttribute('aria-labelledby');
       });
     });
+
+    // NOTE: due to an unknown bug in the Cleave implementation, we are unable to test change events,
+    // but we can at least confirm that the component renders an input when an inputMask is passed.
+    describe('Masked', () => {
+      test('Properly renders an input when inputMask is passed', () => {
+        render(
+          <TextInput {...baseProps} inputMask="phone" placeholder="phone" />,
+        );
+        const inputElement = screen.getByPlaceholderText('phone');
+        expect(inputElement).toBeInTheDocument();
+      });
+    });
   });
 });
diff --git a/src/components/TextInput/TextInput.tsx b/src/components/TextInput/TextInput.tsx
index ef72feb34..057844f93 100644
--- a/src/components/TextInput/TextInput.tsx
+++ b/src/components/TextInput/TextInput.tsx
@@ -1,11 +1,15 @@
 import React, {
   FC,
   ChangeEvent,
+  MouseEvent,
+  KeyboardEvent,
   FocusEvent,
   ReactNode,
 } from 'react';
 import classNames from 'classnames';
 import Cleave from 'cleave.js/react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import { UnknownPropertiesObjType } from '../../lib/types';
 import * as InputMasks from './TextInputMasks';
 import FormLabel from '../FormLabel/FormLabel';
@@ -79,6 +83,11 @@ interface TextInputProps {
    * Callback function to call on blur event.
    */
   onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+  /**
+   * Callback function to call when input us cleared. When this is passed,
+   * the input will display an icon on the right side, for triggering this callback.
+   */
+  onClear?: (event: (MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>)) => void;
   /**
    * Callback function to call on focus event.
    */
@@ -90,7 +99,7 @@ interface TextInputProps {
   /**
    * The input 'type' value. Defaults to type 'text'.
    */
-  type: 'text' | 'password' | 'email' | 'tel' | 'url' | 'search';
+  type?: 'text' | 'password' | 'email' | 'tel' | 'url' | 'search';
 }
 
 const TextInput: FC<TextInputProps> = ({
@@ -109,29 +118,11 @@ const TextInput: FC<TextInputProps> = ({
   maxLength = undefined,
   name = '',
   onBlur = undefined,
+  onClear = undefined,
   onFocus = undefined,
   placeholder = '',
   type = 'text',
 }) => {
-  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
-    onChange(event);
-  };
-
-  const handleFocus = (event: FocusEvent<HTMLInputElement>): void => {
-    if (onFocus) onFocus(event);
-    // Selects input content allowing immediate edit. @TODO Confirm if desired functionality.
-    event.currentTarget.select();
-  };
-
-  const handleBlur = (event: FocusEvent<HTMLInputElement>): void => {
-    if (onBlur) onBlur(event);
-  };
-
-  const inputClasses = classNames(
-    styles['text-input'],
-    { [styles.error]: error },
-  );
-
   const getInputMask = (
     mask: inputMaskType,
     availableInputMasks: {
@@ -166,6 +157,35 @@ const TextInput: FC<TextInputProps> = ({
     return autoComplete;
   };
 
+  const inputWrapperClasses = classNames(
+    styles['text-input-wrapper'],
+    {
+      [styles.error]: error,
+      [styles.disabled]: isDisabled,
+    },
+  );
+
+  const renderClearIcon = (): ReactNode => {
+    const handleKeyPress = (event: KeyboardEvent<HTMLButtonElement>): void => {
+      if (event.keyCode === 13 && onClear) onClear(event);
+    };
+
+    return (
+      <button
+        type="button"
+        onClick={onClear}
+        onKeyUp={handleKeyPress}
+        className={styles['clear-button']}
+        data-testid="text-input-clear-button"
+      >
+        <FontAwesomeIcon
+          icon={faTimes}
+          className={styles['clear-icon']}
+        />
+      </button>
+    );
+  };
+
   const inputProps = {
     'aria-required': isRequired,
     'aria-invalid': !!error,
@@ -173,14 +193,13 @@ const TextInput: FC<TextInputProps> = ({
     'aria-labelledby': label && !hideLabel ? `${id}Label` : undefined,
     autoComplete: getAutoCompleteValue(),
     autoFocus,
-    className: inputClasses,
     disabled: isDisabled,
     id,
     maxLength,
     name,
-    onBlur: handleBlur,
-    onChange: handleChange,
-    onFocus: handleFocus,
+    onBlur,
+    onChange,
+    onFocus,
     placeholder,
     type,
     value,
@@ -197,11 +216,14 @@ const TextInput: FC<TextInputProps> = ({
   return (
     <div className={className}>
       {label && !hideLabel && <FormLabel {...labelProps}>{label}</FormLabel>}
-      {!inputMask ? (
-        <input {...inputProps} />
-      ) : (
-        <Cleave {...inputProps} options={getInputMask(inputMask, InputMasks)} />
-      )}
+      <div className={inputWrapperClasses}>
+        {!inputMask ? (
+          <input {...inputProps} />
+        ) : (
+          <Cleave {...inputProps} options={getInputMask(inputMask, InputMasks)} />
+        )}
+        {!!onClear && !!value && renderClearIcon()}
+      </div>
       {error && error !== true && <InputValidationMessage>{error}</InputValidationMessage>}
     </div>
   );
diff --git a/src/styles/variables/forms.scss b/src/styles/variables/forms.scss
index 5e67e8619..a95ece556 100644
--- a/src/styles/variables/forms.scss
+++ b/src/styles/variables/forms.scss
@@ -34,6 +34,8 @@
   --form-control-description-color: var(--color-font-grey-dark);
   --form-control-disabled-font-color: var(--color-font-grey-light);
   --form-control-placeholder-color: var(--color-font-grey-light);
+  --form-control-icon-color: var(--form-control-placeholder-color);
+  --form-control-icon-hover-color: var(--color-brand-grey);
 
   /* ----RADIO GROUP---- */
   --form-control-radio-group-description-spacing: var(--size-spacing-xs);
@@ -41,8 +43,11 @@
   --form-control-radio-group-options-spacing: var(--size-spacing-md);
 
   /* ----SELECT INPUT---- */
-  --form-control-select-icon-color: var(--color-brand-grey-light);
-  --form-control-select-icon-hover-color: var(--color-brand-grey);
   --form-control-select-icon-size: 34px;
   --form-control-select-padding: var(--size-spacing-2xs);
+  --form-control-select-clear-icon-margin: var(--size-spacing-xs);
+
+  /* ----TEXT INPUT---- */
+  --form-control-text-clear-icon-margin: var(--size-spacing-xs);
+  --form-control-text-clear-icon-font-size: var(--size-font-lg);
 }
diff --git a/tsconfig.json b/tsconfig.json
index bf6d51769..7d22c3193 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,6 +15,10 @@
     "esModuleInterop": true,
     "isolatedModules": true,
     "resolveJsonModule": true,
+    "lib": [
+      "ES6",
+      "DOM"
+    ]
   },
   "include": [
     "./src",