diff --git a/.changeset/clever-shrimps-search.md b/.changeset/clever-shrimps-search.md
new file mode 100644
index 00000000000..300d9abb831
--- /dev/null
+++ b/.changeset/clever-shrimps-search.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Text Input enhancements
diff --git a/docs/content/TextInput.mdx b/docs/content/TextInput.mdx
index 806b19caae2..a229c8dce16 100644
--- a/docs/content/TextInput.mdx
+++ b/docs/content/TextInput.mdx
@@ -8,25 +8,78 @@ TextInput is a form component to add default styling to the native text input.
 
 **Note:** Don't forget to set `aria-label` to make the TextInput accessible to screen reader users.
 
-## Examples
+## Default example
+
+```jsx live
+<TextInput aria-label="Zipcode" name="zipcode" placeholder="Zipcode" autoComplete="postal-code" />
+```
+
+## Text Input with icons
+
+```jsx live
+<>
+  <TextInput
+    leadingVisual={SearchIcon}
+    aria-label="Zipcode"
+    name="zipcode"
+    placeholder="Zip"
+    autoComplete="postal-code"
+  />
+
+  <TextInput
+    trailingVisual={SearchIcon}
+    aria-label="Zipcode"
+    name="zipcode"
+    placeholder="Zip"
+    autoComplete="postal-code"
+  />
+</>
+```
+
+## Text Input with text visuals
 
 ```jsx live
 <>
-  <TextInput aria-label="Zipcode" name="zipcode" placeholder="Zipcode" autoComplete="postal-code" />
+  <TextInput leadingVisual="$" aria-label="Cost of the thing" name="cost" placeholder="23.45" />
+
+  <TextInput sx={{width: '150px'}} trailingVisual="minutes" aria-label="Time in minutes" name="time" placeholder="25" />
+</>
+```
 
-  <TextInput sx={{ml: 4}} aria-label="City" name="city" placeholder="City" contrast />
+## Text Input with error and warning states
+
+```jsx live
+<>
+  <TextInput
+    validationStatus="error"
+    aria-label="Zipcode"
+    name="zipcode"
+    placeholder="Error"
+    autoComplete="postal-code"
+  />
 
   <TextInput
-    sx={{ml: 4}}
-    icon={SearchIcon}
+    validationStatus="warning"
     aria-label="Zipcode"
     name="zipcode"
-    placeholder="Find user"
+    placeholder="Warning"
     autoComplete="postal-code"
   />
 </>
 ```
 
+## Block text input
+
+```jsx live
+<TextInput block aria-label="Zipcode" name="zipcode" placeholder="560076" autoComplete="postal-code" />
+```
+
+## Contrast text input
+
+```jsx live
+<TextInput contrast aria-label="Zipcode" name="zipcode" placeholder="Find user" autoComplete="postal-code" />
+```
+
 ## Props
 
 ### TextInput
@@ -39,7 +92,7 @@ TextInput is a form component to add default styling to the native text input.
     defaultValue="false"
     description={
       <>
-        Adds <InlineCode>display: block</InlineCode> to element
+        Creates a full width input element
       </>
     }
   />
@@ -49,11 +102,27 @@ TextInput is a form component to add default styling to the native text input.
     defaultValue="false"
     description="Changes background color to a higher contrast color"
   />
-  <PropsTableRow
-    name="variant"
-    type="'small' | 'large'"
-    description="Creates a smaller or larger input than the default."
-  />
+  <PropsTableRow name='size' type="'small' | 'medium' | 'large'"     description="Creates a smaller or larger input than the default." />
+
+<PropsTableRow
+  name="leadingVisual"
+  type={<>string | React.ComponentType</>}
+  description="Visual positioned on the left edge inside the input"
+/>
+<PropsTableRow
+  name="trailingVisual"
+  type={<>string | React.ComponentType</>}
+  description="Visual positioned on the right edge inside the input"
+/>
+<PropsTableRow name="validationStatus" type="'warning' | 'error'" description="Style the input to match the status" />
+
+<PropsTableRow
+  name="variant"
+  type="'small' | 'medium' | 'large'"
+  description="(Use size) Creates a smaller or larger input than the default."
+  deprecated
+/>
+
   <PropsTableRow
     name="width"
     type={
@@ -61,7 +130,8 @@ TextInput is a form component to add default styling to the native text input.
         string | number | <Link href="https://styled-system.com/guides/array-props">Array&lt;string | number&gt;</Link>
       </>
     }
-    description="Set the width of the input"
+    description="(Use sx prop) Set the width of the input"
+    deprecated
   />
   <PropsTableRow
     name="maxWidth"
@@ -70,7 +140,8 @@ TextInput is a form component to add default styling to the native text input.
         string | number | <Link href="https://styled-system.com/guides/array-props">Array&lt;string | number&gt;</Link>
       </>
     }
-    description="Set the maximum width of the input"
+    description="(Use sx prop) Set the maximum width of the input"
+    deprecated
   />
   <PropsTableRow
     name="minWidth"
@@ -79,12 +150,14 @@ TextInput is a form component to add default styling to the native text input.
         string | number | <Link href="https://styled-system.com/guides/array-props">Array&lt;string | number&gt;</Link>
       </>
     }
-    description="Set the minimum width of the input"
+    description="(Use sx prop) Set the minimum width of the input"
+    deprecated
   />
   <PropsTableRow
     name="icon"
     type="React.ComponentType"
-    description="An Octicon React component. To be used inside of input. Positioned on the left edge."
+    description="(Use leadingVisual or trailingVisual) An Octicon React component. To be used inside of input. Positioned on the left edge."
+    deprecated
   />
   <PropsTableSxRow />
   <PropsTableRefRow
@@ -110,8 +183,8 @@ TextInput is a form component to add default styling to the native text input.
     adaptsToScreenSizes: true,
     fullTestCoverage: false,
     usedInProduction: true,
-    usageExamplesDocumented: false,
-    hasStorybookStories: false,
+    usageExamplesDocumented: true,
+    hasStorybookStories: true,
     designReviewed: false,
     a11yReviewed: false,
     stableApi: false,
diff --git a/src/TextInput.tsx b/src/TextInput.tsx
index 4b30f76fe12..e647a3ac4dd 100644
--- a/src/TextInput.tsx
+++ b/src/TextInput.tsx
@@ -6,10 +6,13 @@ import TextInputWrapper from './_TextInputWrapper'
 
 type NonPassthroughProps = {
   className?: string
+  /** @deprecated Use `leadingVisual` or `trailingVisual` prop instead */
   icon?: React.ComponentType<{className?: string}>
+  leadingVisual?: string | React.ComponentType<{className?: string}>
+  trailingVisual?: string | React.ComponentType<{className?: string}>
 } & Pick<
   ComponentProps<typeof TextInputWrapper>,
-  'block' | 'contrast' | 'disabled' | 'sx' | 'theme' | 'width' | 'maxWidth' | 'minWidth' | 'variant'
+  'block' | 'contrast' | 'disabled' | 'sx' | 'width' | 'maxWidth' | 'minWidth' | 'variant' | 'size'
 >
 
 // Note: using ComponentProps instead of ComponentPropsWithoutRef here would cause a type issue where `css` is a required prop.
@@ -20,16 +23,21 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputInternalProps>(
   (
     {
       icon: IconComponent,
+      leadingVisual: LeadingVisual,
+      trailingVisual: TrailingVisual,
       block,
       className,
       contrast,
       disabled,
+      validationStatus,
       sx: sxProp,
-      theme,
+      size: sizeProp,
+      // start deprecated props
       width: widthProp,
       minWidth: minWidthProp,
       maxWidth: maxWidthProp,
       variant: variantProp,
+      // end deprecated props
       ...inputProps
     },
     ref
@@ -41,18 +49,30 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputInternalProps>(
       <TextInputWrapper
         block={block}
         className={wrapperClasses}
+        validationStatus={validationStatus}
         contrast={contrast}
         disabled={disabled}
-        hasIcon={!!IconComponent}
         sx={sxProp}
-        theme={theme}
+        size={sizeProp}
         width={widthProp}
         minWidth={minWidthProp}
         maxWidth={maxWidthProp}
         variant={variantProp}
+        hasLeadingVisual={Boolean(LeadingVisual)}
+        hasTrailingVisual={Boolean(TrailingVisual)}
       >
         {IconComponent && <IconComponent className="TextInput-icon" />}
-        <UnstyledTextInput ref={ref} disabled={disabled} {...inputProps} />
+        {LeadingVisual && (
+          <span className="TextInput-icon">
+            {typeof LeadingVisual === 'function' ? <LeadingVisual /> : LeadingVisual}
+          </span>
+        )}
+        <UnstyledTextInput ref={ref} disabled={disabled} {...inputProps} data-component="input" />
+        {TrailingVisual && (
+          <span className="TextInput-icon">
+            {typeof TrailingVisual === 'function' ? <TrailingVisual /> : TrailingVisual}
+          </span>
+        )}
       </TextInputWrapper>
     )
   }
diff --git a/src/TextInputWithTokens.tsx b/src/TextInputWithTokens.tsx
index ea23630b155..3da12f136f7 100644
--- a/src/TextInputWithTokens.tsx
+++ b/src/TextInputWithTokens.tsx
@@ -9,7 +9,7 @@ import {TokenSizeKeys} from './Token/TokenBase'
 import {TextInputProps} from './TextInput'
 import {useProvidedRefOrCreate} from './hooks'
 import UnstyledTextInput from './_UnstyledTextInput'
-import TextInputWrapper from './_TextInputWrapper'
+import TextInputWrapper, {textInputHorizPadding} from './_TextInputWrapper'
 import Box from './Box'
 import Text from './Text'
 import {isFocusable} from '@primer/behaviors/utils'
@@ -241,7 +241,7 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
       className={className}
       contrast={contrast}
       disabled={disabled}
-      hasIcon={!!IconComponent}
+      hasLeadingVisual={Boolean(IconComponent)}
       theme={theme}
       width={widthProp}
       minWidth={minWidthProp}
@@ -249,6 +249,8 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
       variant={variantProp}
       onClick={focusInput}
       sx={{
+        paddingLeft: textInputHorizPadding,
+        py: `calc(${textInputHorizPadding} / 2)`,
         ...(block
           ? {
               display: 'flex',
@@ -289,13 +291,13 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
           }
         }}
       >
+        {IconComponent && <IconComponent className="TextInput-icon" />}
         <Box
           sx={{
             order: 1,
             flexGrow: 1
           }}
         >
-          {IconComponent && <IconComponent className="TextInput-icon" />}
           <UnstyledTextInput
             ref={combinedInputRef}
             disabled={disabled}
diff --git a/src/_TextInputWrapper.tsx b/src/_TextInputWrapper.tsx
index fbc4da61e13..a105d4b0d8d 100644
--- a/src/_TextInputWrapper.tsx
+++ b/src/_TextInputWrapper.tsx
@@ -3,7 +3,25 @@ import {maxWidth, MaxWidthProps, minWidth, MinWidthProps, variant, width, WidthP
 import {get} from './constants'
 import sx, {SxProp} from './sx'
 
+const sizeDeprecatedVariants = variant({
+  variants: {
+    small: {
+      minHeight: '28px',
+      px: 2,
+      py: '3px',
+      fontSize: 0,
+      lineHeight: '20px'
+    },
+    large: {
+      px: 2,
+      py: '10px',
+      fontSize: 3
+    }
+  }
+})
+
 const sizeVariants = variant({
+  prop: 'size',
   variants: {
     small: {
       minHeight: '28px',
@@ -22,23 +40,28 @@ const sizeVariants = variant({
 
 type StyledWrapperProps = {
   disabled?: boolean
-  hasIcon?: boolean
+  hasLeadingVisual?: boolean
+  hasTrailingVisual?: boolean
   block?: boolean
   contrast?: boolean
+  validationStatus?: 'error' | 'warning'
+  /** @deprecated Use `size` prop instead */
   variant?: 'small' | 'large'
+  size?: 'small' | 'large'
 } & WidthProps &
   MinWidthProps &
   MaxWidthProps &
   SxProp
 
+export const textInputHorizPadding = '12px'
+
 const TextInputWrapper = styled.span<StyledWrapperProps>`
-  display: inline-flex;
-  align-items: stretch;
-  min-height: 34px;
+  min-height: 32px;
   font-size: ${get('fontSizes.1')};
   line-height: 20px;
   color: ${get('colors.fg.default')};
   vertical-align: middle;
+  background-color: ${get('colors.canvas.default')};
   background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
   background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
   border: 1px solid ${get('colors.border.default')};
@@ -46,23 +69,26 @@ const TextInputWrapper = styled.span<StyledWrapperProps>`
   outline: none;
   box-shadow: ${get('shadows.primer.shadow.inset')};
   cursor: text;
+  display: inline-flex;
+  align-items: stretch;
+  & > :not(:last-child) {
+    margin-right: ${get('space.2')};
+  }
 
-  ${props => {
-    if (props.hasIcon) {
-      return css`
-        padding: 0;
-      `
-    } else {
-      return css`
-        padding: 6px 12px;
-      `
-    }
-  }}
+  ${props =>
+    css`
+      padding-left: ${props.hasLeadingVisual ? textInputHorizPadding : 0};
+      padding-right: ${props.hasTrailingVisual ? textInputHorizPadding : 0};
+
+      > input {
+        padding-left: ${!props.hasLeadingVisual ? textInputHorizPadding : 0};
+        padding-right: ${!props.hasTrailingVisual ? textInputHorizPadding : 0};
+      }
+    `}
 
   .TextInput-icon {
     align-self: center;
     color: ${get('colors.fg.muted')};
-    margin: 0 ${get('space.2')};
     flex-shrink: 0;
   }
 
@@ -84,30 +110,43 @@ const TextInputWrapper = styled.span<StyledWrapperProps>`
       background-color: ${get('colors.input.disabledBg')};
       border-color: ${get('colors.border.default')};
     `}
-  
-    ${props =>
-    props.block &&
+
+  ${props =>
+    props.validationStatus === 'error' &&
     css`
-      display: block;
-      width: 100%;
+      border-color: ${get('colors.danger.emphasis')};
+      &:focus-within {
+        border-color: ${get('colors.danger.emphasis')};
+        box-shadow: ${get('shadows.btn.danger.focusShadow')};
+      }
     `}
 
+  ${props =>
+    props.validationStatus === 'warning' &&
+    css`
+      border-color: ${get('colors.attention.emphasis')};
+      &:focus-within {
+        border-color: ${get('colors.attention.emphasis')};
+        box-shadow: 0 0 0 3px ${get('colors.attention.muted')};
+      }
+    `}
+  
     ${props =>
     props.block &&
-    props.hasIcon &&
     css`
-      display: flex;
+      width: 100%;
     `}
   
-    // Ensures inputs don't zoom on mobile but are body-font size on desktop
+    // Ensures inputs don' t zoom on mobile but are body-font size on desktop
     @media (min-width: ${get('breakpoints.1')}) {
     font-size: ${get('fontSizes.1')};
   }
   ${width}
   ${minWidth}
-    ${maxWidth}
-    ${sizeVariants}
-    ${sx};
+  ${maxWidth}
+  ${sizeDeprecatedVariants}
+  ${sizeVariants}
+  ${sx};
 `
 
 export default TextInputWrapper
diff --git a/src/__tests__/TextInput.test.tsx b/src/__tests__/TextInput.test.tsx
index 7427a76569d..3e8b071e3c4 100644
--- a/src/__tests__/TextInput.test.tsx
+++ b/src/__tests__/TextInput.test.tsx
@@ -4,6 +4,7 @@ import {render, mount, behavesAsComponent, checkExports} from '../utils/testing'
 import {render as HTMLRender, cleanup} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
 import 'babel-polyfill'
+import {SearchIcon} from '@primer/octicons-react'
 expect.extend(toHaveNoViolations)
 
 describe('TextInput', () => {
@@ -25,17 +26,41 @@ describe('TextInput', () => {
   })
 
   it('renders small', () => {
-    expect(render(<TextInput name="zipcode" variant="small" />)).toMatchSnapshot()
+    expect(render(<TextInput name="zipcode" size="small" />)).toMatchSnapshot()
   })
 
   it('renders large', () => {
-    expect(render(<TextInput name="zipcode" variant="large" />)).toMatchSnapshot()
+    expect(render(<TextInput name="zipcode" size="large" />)).toMatchSnapshot()
   })
 
   it('renders block', () => {
     expect(render(<TextInput name="zipcode" block />)).toMatchSnapshot()
   })
 
+  it('renders warning', () => {
+    expect(render(<TextInput name="zipcode" status="warning" />)).toMatchSnapshot()
+  })
+
+  it('renders error', () => {
+    expect(render(<TextInput name="zipcode" status="error" />)).toMatchSnapshot()
+  })
+
+  it('renders contrast', () => {
+    expect(render(<TextInput name="zipcode" status="contrast" />)).toMatchSnapshot()
+  })
+
+  it('renders placeholder', () => {
+    expect(render(<TextInput name="zipcode" placeholder={'560076'} />)).toMatchSnapshot()
+  })
+
+  it('renders leadingVisual', () => {
+    expect(render(<TextInput name="search" placeholder={'Search'} leadingVisual={SearchIcon} />)).toMatchSnapshot()
+  })
+
+  it('renders trailingVisual', () => {
+    expect(render(<TextInput name="search" placeholder={'Search'} trailingVisual={SearchIcon} />)).toMatchSnapshot()
+  })
+
   it('should call onChange prop with input value', () => {
     const onChangeMock = jest.fn()
     const component = mount(<TextInput onChange={onChangeMock} value="test" />)
diff --git a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
index 81eed5d4814..9e02e69dbcc 100644
--- a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -17,19 +17,12 @@ Array [
 }
 
 .c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 34px;
+  min-height: 32px;
   font-size: 14px;
   line-height: 20px;
   color: #24292f;
   vertical-align: middle;
+  background-color: #ffffff;
   background-repeat: no-repeat;
   background-position: right 8px center;
   border: 1px solid #d0d7de;
@@ -37,7 +30,25 @@ Array [
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   cursor: text;
-  padding: 6px 12px;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 > input {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c0 .TextInput-icon {
@@ -45,7 +56,6 @@ Array [
   -ms-flex-item-align: center;
   align-self: center;
   color: #57606a;
-  margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -72,6 +82,7 @@ Array [
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
       className="c1"
+      data-component="input"
       onBlur={[Function]}
       onChange={[Function]}
       onFocus={[Function]}
@@ -130,19 +141,12 @@ Array [
 }
 
 .c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 34px;
+  min-height: 32px;
   font-size: 14px;
   line-height: 20px;
   color: #24292f;
   vertical-align: middle;
+  background-color: #ffffff;
   background-repeat: no-repeat;
   background-position: right 8px center;
   border: 1px solid #d0d7de;
@@ -150,7 +154,25 @@ Array [
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   cursor: text;
-  padding: 6px 12px;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 > input {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c0 .TextInput-icon {
@@ -158,7 +180,6 @@ Array [
   -ms-flex-item-align: center;
   align-self: center;
   color: #57606a;
-  margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -185,6 +206,7 @@ Array [
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
       className="c1"
+      data-component="input"
       onBlur={[Function]}
       onChange={[Function]}
       onFocus={[Function]}
@@ -278,19 +300,12 @@ Array [
 }
 
 .c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 34px;
+  min-height: 32px;
   font-size: 14px;
   line-height: 20px;
   color: #24292f;
   vertical-align: middle;
+  background-color: #ffffff;
   background-repeat: no-repeat;
   background-position: right 8px center;
   border: 1px solid #d0d7de;
@@ -298,7 +313,25 @@ Array [
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   cursor: text;
-  padding: 6px 12px;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 > input {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c0 .TextInput-icon {
@@ -306,7 +339,6 @@ Array [
   -ms-flex-item-align: center;
   align-self: center;
   color: #57606a;
-  margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -333,6 +365,7 @@ Array [
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
       className="c1"
+      data-component="input"
       onBlur={[Function]}
       onChange={[Function]}
       onFocus={[Function]}
@@ -1189,19 +1222,12 @@ Array [
 }
 
 .c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 34px;
+  min-height: 32px;
   font-size: 14px;
   line-height: 20px;
   color: #24292f;
   vertical-align: middle;
+  background-color: #ffffff;
   background-repeat: no-repeat;
   background-position: right 8px center;
   border: 1px solid #d0d7de;
@@ -1209,7 +1235,25 @@ Array [
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   cursor: text;
-  padding: 6px 12px;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 > input {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c0 .TextInput-icon {
@@ -1217,7 +1261,6 @@ Array [
   -ms-flex-item-align: center;
   align-self: center;
   color: #57606a;
-  margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -1244,6 +1287,7 @@ Array [
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
       className="c1"
+      data-component="input"
       onBlur={[Function]}
       onChange={[Function]}
       onFocus={[Function]}
@@ -2010,19 +2054,12 @@ Array [
 }
 
 .c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 34px;
+  min-height: 32px;
   font-size: 14px;
   line-height: 20px;
   color: #24292f;
   vertical-align: middle;
+  background-color: #ffffff;
   background-repeat: no-repeat;
   background-position: right 8px center;
   border: 1px solid #d0d7de;
@@ -2030,7 +2067,25 @@ Array [
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   cursor: text;
-  padding: 6px 12px;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 > input {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c0 .TextInput-icon {
@@ -2038,7 +2093,6 @@ Array [
   -ms-flex-item-align: center;
   align-self: center;
   color: #57606a;
-  margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -2065,6 +2119,7 @@ Array [
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
       className="c1"
+      data-component="input"
       onBlur={[Function]}
       onChange={[Function]}
       onFocus={[Function]}
@@ -2842,19 +2897,12 @@ Array [
 }
 
 .c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 34px;
+  min-height: 32px;
   font-size: 14px;
   line-height: 20px;
   color: #24292f;
   vertical-align: middle;
+  background-color: #ffffff;
   background-repeat: no-repeat;
   background-position: right 8px center;
   border: 1px solid #d0d7de;
@@ -2862,7 +2910,25 @@ Array [
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   cursor: text;
-  padding: 6px 12px;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 > input {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c0 .TextInput-icon {
@@ -2870,7 +2936,6 @@ Array [
   -ms-flex-item-align: center;
   align-self: center;
   color: #57606a;
-  margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -2897,6 +2962,7 @@ Array [
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
       className="c1"
+      data-component="input"
       onBlur={[Function]}
       onChange={[Function]}
       onFocus={[Function]}
@@ -3804,19 +3870,12 @@ Array [
 }
 
 .c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 34px;
+  min-height: 32px;
   font-size: 14px;
   line-height: 20px;
   color: #24292f;
   vertical-align: middle;
+  background-color: #ffffff;
   background-repeat: no-repeat;
   background-position: right 8px center;
   border: 1px solid #d0d7de;
@@ -3824,7 +3883,25 @@ Array [
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   cursor: text;
-  padding: 6px 12px;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 > input {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c0 .TextInput-icon {
@@ -3832,7 +3909,6 @@ Array [
   -ms-flex-item-align: center;
   align-self: center;
   color: #57606a;
-  margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -3859,6 +3935,7 @@ Array [
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
       className="c1"
+      data-component="input"
       onBlur={[Function]}
       onChange={[Function]}
       onFocus={[Function]}
diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index 5e1a7138d61..9bb4af11590 100644
--- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -16,6 +16,19 @@ exports[`TextInput renders 1`] = `
 }
 
 .c0 {
+  min-height: 32px;
+  font-size: 14px;
+  line-height: 20px;
+  color: #24292f;
+  vertical-align: middle;
+  background-color: #ffffff;
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -24,11 +37,74 @@ exports[`TextInput renders 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 34px;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 > input {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.c0 .TextInput-icon {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #57606a;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c0:focus-within {
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+  className="c0 TextInput-wrapper"
+>
+  <input
+    className="c1"
+    data-component="input"
+    name="zipcode"
+    type="text"
+  />
+</span>
+`;
+
+exports[`TextInput renders block 1`] = `
+.c1 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c1:focus {
+  outline: 0;
+}
+
+.c0 {
+  min-height: 32px;
   font-size: 14px;
   line-height: 20px;
   color: #24292f;
   vertical-align: middle;
+  background-color: #ffffff;
   background-repeat: no-repeat;
   background-position: right 8px center;
   border: 1px solid #d0d7de;
@@ -36,7 +112,26 @@ exports[`TextInput renders 1`] = `
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   cursor: text;
-  padding: 6px 12px;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  padding-left: 0;
+  padding-right: 0;
+  width: 100%;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 > input {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c0 .TextInput-icon {
@@ -44,7 +139,6 @@ exports[`TextInput renders 1`] = `
   -ms-flex-item-align: center;
   align-self: center;
   color: #57606a;
-  margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -66,13 +160,14 @@ exports[`TextInput renders 1`] = `
 >
   <input
     className="c1"
+    data-component="input"
     name="zipcode"
     type="text"
   />
 </span>
 `;
 
-exports[`TextInput renders block 1`] = `
+exports[`TextInput renders consistently 1`] = `
 .c1 {
   border: 0;
   font-size: inherit;
@@ -88,6 +183,19 @@ exports[`TextInput renders block 1`] = `
 }
 
 .c0 {
+  min-height: 32px;
+  font-size: 14px;
+  line-height: 20px;
+  color: #24292f;
+  vertical-align: middle;
+  background-color: #ffffff;
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -96,11 +204,73 @@ exports[`TextInput renders block 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 34px;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 > input {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.c0 .TextInput-icon {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #57606a;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c0:focus-within {
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+  className="c0 TextInput-wrapper"
+>
+  <input
+    className="c1"
+    data-component="input"
+    type="text"
+  />
+</span>
+`;
+
+exports[`TextInput renders contrast 1`] = `
+.c1 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c1:focus {
+  outline: 0;
+}
+
+.c0 {
+  min-height: 32px;
   font-size: 14px;
   line-height: 20px;
   color: #24292f;
   vertical-align: middle;
+  background-color: #ffffff;
   background-repeat: no-repeat;
   background-position: right 8px center;
   border: 1px solid #d0d7de;
@@ -108,9 +278,25 @@ exports[`TextInput renders block 1`] = `
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   cursor: text;
-  padding: 6px 12px;
-  display: block;
-  width: 100%;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 > input {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c0 .TextInput-icon {
@@ -118,7 +304,6 @@ exports[`TextInput renders block 1`] = `
   -ms-flex-item-align: center;
   align-self: center;
   color: #57606a;
-  margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -140,13 +325,14 @@ exports[`TextInput renders block 1`] = `
 >
   <input
     className="c1"
+    data-component="input"
     name="zipcode"
     type="text"
   />
 </span>
 `;
 
-exports[`TextInput renders consistently 1`] = `
+exports[`TextInput renders error 1`] = `
 .c1 {
   border: 0;
   font-size: inherit;
@@ -162,6 +348,19 @@ exports[`TextInput renders consistently 1`] = `
 }
 
 .c0 {
+  min-height: 32px;
+  font-size: 14px;
+  line-height: 20px;
+  color: #24292f;
+  vertical-align: middle;
+  background-color: #ffffff;
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -170,11 +369,74 @@ exports[`TextInput renders consistently 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 34px;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 > input {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.c0 .TextInput-icon {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #57606a;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c0:focus-within {
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+  className="c0 TextInput-wrapper"
+>
+  <input
+    className="c1"
+    data-component="input"
+    name="zipcode"
+    type="text"
+  />
+</span>
+`;
+
+exports[`TextInput renders large 1`] = `
+.c1 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c1:focus {
+  outline: 0;
+}
+
+.c0 {
+  min-height: 32px;
   font-size: 14px;
   line-height: 20px;
   color: #24292f;
   vertical-align: middle;
+  background-color: #ffffff;
   background-repeat: no-repeat;
   background-position: right 8px center;
   border: 1px solid #d0d7de;
@@ -182,7 +444,30 @@ exports[`TextInput renders consistently 1`] = `
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   cursor: text;
-  padding: 6px 12px;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  padding-left: 0;
+  padding-right: 0;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  font-size: 20px;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 > input {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c0 .TextInput-icon {
@@ -190,7 +475,6 @@ exports[`TextInput renders consistently 1`] = `
   -ms-flex-item-align: center;
   align-self: center;
   color: #57606a;
-  margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -209,15 +493,18 @@ exports[`TextInput renders consistently 1`] = `
 
 <span
   className="c0 TextInput-wrapper"
+  size="large"
 >
   <input
     className="c1"
+    data-component="input"
+    name="zipcode"
     type="text"
   />
 </span>
 `;
 
-exports[`TextInput renders large 1`] = `
+exports[`TextInput renders leadingVisual 1`] = `
 .c1 {
   border: 0;
   font-size: inherit;
@@ -233,6 +520,19 @@ exports[`TextInput renders large 1`] = `
 }
 
 .c0 {
+  min-height: 32px;
+  font-size: 14px;
+  line-height: 20px;
+  color: #24292f;
+  vertical-align: middle;
+  background-color: #ffffff;
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -241,11 +541,101 @@ exports[`TextInput renders large 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 34px;
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 > input {
+  padding-left: 0;
+  padding-right: 12px;
+}
+
+.c0 .TextInput-icon {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #57606a;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c0:focus-within {
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+  className="c0 TextInput-wrapper"
+>
+  <span
+    className="TextInput-icon"
+  >
+    <svg
+      aria-hidden="true"
+      className="octicon octicon-search"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "<path fill-rule=\\"evenodd\\" d=\\"M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z\\"></path>",
+        }
+      }
+      fill="currentColor"
+      height={16}
+      role="img"
+      style={
+        Object {
+          "display": "inline-block",
+          "overflow": "visible",
+          "userSelect": "none",
+          "verticalAlign": "text-bottom",
+        }
+      }
+      viewBox="0 0 16 16"
+      width={16}
+    />
+  </span>
+  <input
+    className="c1"
+    data-component="input"
+    name="search"
+    placeholder="Search"
+    type="text"
+  />
+</span>
+`;
+
+exports[`TextInput renders placeholder 1`] = `
+.c1 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c1:focus {
+  outline: 0;
+}
+
+.c0 {
+  min-height: 32px;
   font-size: 14px;
   line-height: 20px;
   color: #24292f;
   vertical-align: middle;
+  background-color: #ffffff;
   background-repeat: no-repeat;
   background-position: right 8px center;
   border: 1px solid #d0d7de;
@@ -253,12 +643,25 @@ exports[`TextInput renders large 1`] = `
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   cursor: text;
-  padding: 6px 12px;
-  padding-left: 8px;
-  padding-right: 8px;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  font-size: 20px;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 > input {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c0 .TextInput-icon {
@@ -266,7 +669,6 @@ exports[`TextInput renders large 1`] = `
   -ms-flex-item-align: center;
   align-self: center;
   color: #57606a;
-  margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -288,7 +690,9 @@ exports[`TextInput renders large 1`] = `
 >
   <input
     className="c1"
+    data-component="input"
     name="zipcode"
+    placeholder="560076"
     type="text"
   />
 </span>
@@ -310,19 +714,12 @@ exports[`TextInput renders small 1`] = `
 }
 
 .c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 34px;
+  min-height: 32px;
   font-size: 14px;
   line-height: 20px;
   color: #24292f;
   vertical-align: middle;
+  background-color: #ffffff;
   background-repeat: no-repeat;
   background-position: right 8px center;
   border: 1px solid #d0d7de;
@@ -330,7 +727,16 @@ exports[`TextInput renders small 1`] = `
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   cursor: text;
-  padding: 6px 12px;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  padding-left: 0;
+  padding-right: 0;
   min-height: 28px;
   padding-left: 8px;
   padding-right: 8px;
@@ -340,12 +746,20 @@ exports[`TextInput renders small 1`] = `
   line-height: 20px;
 }
 
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 > input {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
 .c0 .TextInput-icon {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
   color: #57606a;
-  margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -364,16 +778,18 @@ exports[`TextInput renders small 1`] = `
 
 <span
   className="c0 TextInput-wrapper"
+  size="small"
 >
   <input
     className="c1"
+    data-component="input"
     name="zipcode"
     type="text"
   />
 </span>
 `;
 
-exports[`TextInput should render a password input 1`] = `
+exports[`TextInput renders trailingVisual 1`] = `
 .c1 {
   border: 0;
   font-size: inherit;
@@ -389,6 +805,19 @@ exports[`TextInput should render a password input 1`] = `
 }
 
 .c0 {
+  min-height: 32px;
+  font-size: 14px;
+  line-height: 20px;
+  color: #24292f;
+  vertical-align: middle;
+  background-color: #ffffff;
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -397,11 +826,184 @@ exports[`TextInput should render a password input 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 34px;
+  padding-left: 0;
+  padding-right: 12px;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 > input {
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c0 .TextInput-icon {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #57606a;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c0:focus-within {
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+  className="c0 TextInput-wrapper"
+>
+  <input
+    className="c1"
+    data-component="input"
+    name="search"
+    placeholder="Search"
+    type="text"
+  />
+  <span
+    className="TextInput-icon"
+  >
+    <svg
+      aria-hidden="true"
+      className="octicon octicon-search"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "<path fill-rule=\\"evenodd\\" d=\\"M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z\\"></path>",
+        }
+      }
+      fill="currentColor"
+      height={16}
+      role="img"
+      style={
+        Object {
+          "display": "inline-block",
+          "overflow": "visible",
+          "userSelect": "none",
+          "verticalAlign": "text-bottom",
+        }
+      }
+      viewBox="0 0 16 16"
+      width={16}
+    />
+  </span>
+</span>
+`;
+
+exports[`TextInput renders warning 1`] = `
+.c1 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c1:focus {
+  outline: 0;
+}
+
+.c0 {
+  min-height: 32px;
+  font-size: 14px;
+  line-height: 20px;
+  color: #24292f;
+  vertical-align: middle;
+  background-color: #ffffff;
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 > input {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.c0 .TextInput-icon {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #57606a;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c0:focus-within {
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+  className="c0 TextInput-wrapper"
+>
+  <input
+    className="c1"
+    data-component="input"
+    name="zipcode"
+    type="text"
+  />
+</span>
+`;
+
+exports[`TextInput should render a password input 1`] = `
+.c1 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c1:focus {
+  outline: 0;
+}
+
+.c0 {
+  min-height: 32px;
   font-size: 14px;
   line-height: 20px;
   color: #24292f;
   vertical-align: middle;
+  background-color: #ffffff;
   background-repeat: no-repeat;
   background-position: right 8px center;
   border: 1px solid #d0d7de;
@@ -409,7 +1011,25 @@ exports[`TextInput should render a password input 1`] = `
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   cursor: text;
-  padding: 6px 12px;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 > input {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c0 .TextInput-icon {
@@ -417,7 +1037,6 @@ exports[`TextInput should render a password input 1`] = `
   -ms-flex-item-align: center;
   align-self: center;
   color: #57606a;
-  margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -439,6 +1058,7 @@ exports[`TextInput should render a password input 1`] = `
 >
   <input
     className="c1"
+    data-component="input"
     name="password"
     type="password"
   />
diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
index c7e0556b8db..d5d14e3c24e 100644
--- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -55,19 +55,12 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
 }
 
 .c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 34px;
+  min-height: 32px;
   font-size: 14px;
   line-height: 20px;
   color: #24292f;
   vertical-align: middle;
+  background-color: #ffffff;
   background-repeat: no-repeat;
   background-position: right 8px center;
   border: 1px solid #d0d7de;
@@ -75,7 +68,28 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   cursor: text;
-  padding: 6px 12px;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 > input {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c0 .TextInput-icon {
@@ -83,7 +97,6 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   -ms-flex-item-align: center;
   align-self: center;
   color: #57606a;
-  margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -415,19 +428,12 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
 }
 
 .c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 34px;
+  min-height: 32px;
   font-size: 14px;
   line-height: 20px;
   color: #24292f;
   vertical-align: middle;
+  background-color: #ffffff;
   background-repeat: no-repeat;
   background-position: right 8px center;
   border: 1px solid #d0d7de;
@@ -435,9 +441,20 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   cursor: text;
-  padding: 6px 12px;
-  display: block;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  padding-left: 0;
+  padding-right: 0;
   width: 100%;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -445,12 +462,20 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   width: 100%;
 }
 
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 > input {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
 .c0 .TextInput-icon {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
   color: #57606a;
-  margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -545,19 +570,12 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
 }
 
 .c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 34px;
+  min-height: 32px;
   font-size: 14px;
   line-height: 20px;
   color: #24292f;
   vertical-align: middle;
+  background-color: #ffffff;
   background-repeat: no-repeat;
   background-position: right 8px center;
   border: 1px solid #d0d7de;
@@ -565,17 +583,37 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   cursor: text;
-  padding: 6px 12px;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
   max-height: 20px;
   overflow: auto;
 }
 
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 > input {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
 .c0 .TextInput-icon {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
   color: #57606a;
-  margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -1182,19 +1220,12 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
 }
 
 .c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 34px;
+  min-height: 32px;
   font-size: 14px;
   line-height: 20px;
   color: #24292f;
   vertical-align: middle;
+  background-color: #ffffff;
   background-repeat: no-repeat;
   background-position: right 8px center;
   border: 1px solid #d0d7de;
@@ -1202,7 +1233,28 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   cursor: text;
-  padding: 6px 12px;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 > input {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c0 .TextInput-icon {
@@ -1210,7 +1262,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   -ms-flex-item-align: center;
   align-self: center;
   color: #57606a;
-  margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -1817,19 +1868,12 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
 }
 
 .c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 34px;
+  min-height: 32px;
   font-size: 14px;
   line-height: 20px;
   color: #24292f;
   vertical-align: middle;
+  background-color: #ffffff;
   background-repeat: no-repeat;
   background-position: right 8px center;
   border: 1px solid #d0d7de;
@@ -1837,7 +1881,28 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   cursor: text;
-  padding: 6px 12px;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 > input {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c0 .TextInput-icon {
@@ -1845,7 +1910,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   -ms-flex-item-align: center;
   align-self: center;
   color: #57606a;
-  margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -2452,19 +2516,12 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
 }
 
 .c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 34px;
+  min-height: 32px;
   font-size: 14px;
   line-height: 20px;
   color: #24292f;
   vertical-align: middle;
+  background-color: #ffffff;
   background-repeat: no-repeat;
   background-position: right 8px center;
   border: 1px solid #d0d7de;
@@ -2472,7 +2529,28 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   cursor: text;
-  padding: 6px 12px;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 > input {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c0 .TextInput-icon {
@@ -2480,7 +2558,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   -ms-flex-item-align: center;
   align-self: center;
   color: #57606a;
-  margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -3087,19 +3164,12 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
 }
 
 .c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 34px;
+  min-height: 32px;
   font-size: 14px;
   line-height: 20px;
   color: #24292f;
   vertical-align: middle;
+  background-color: #ffffff;
   background-repeat: no-repeat;
   background-position: right 8px center;
   border: 1px solid #d0d7de;
@@ -3107,7 +3177,28 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   cursor: text;
-  padding: 6px 12px;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 > input {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c0 .TextInput-icon {
@@ -3115,7 +3206,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   -ms-flex-item-align: center;
   align-self: center;
   color: #57606a;
-  margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -3722,19 +3812,12 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
 }
 
 .c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 34px;
+  min-height: 32px;
   font-size: 14px;
   line-height: 20px;
   color: #24292f;
   vertical-align: middle;
+  background-color: #ffffff;
   background-repeat: no-repeat;
   background-position: right 8px center;
   border: 1px solid #d0d7de;
@@ -3742,16 +3825,36 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   cursor: text;
-  padding: 6px 12px;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
   overflow: auto;
 }
 
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 > input {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
 .c0 .TextInput-icon {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
   color: #57606a;
-  margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -4358,19 +4461,12 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
 }
 
 .c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 34px;
+  min-height: 32px;
   font-size: 14px;
   line-height: 20px;
   color: #24292f;
   vertical-align: middle;
+  background-color: #ffffff;
   background-repeat: no-repeat;
   background-position: right 8px center;
   border: 1px solid #d0d7de;
@@ -4378,7 +4474,28 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   cursor: text;
-  padding: 6px 12px;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 > input {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c0 .TextInput-icon {
@@ -4386,7 +4503,6 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   -ms-flex-item-align: center;
   align-self: center;
   color: #57606a;
-  margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -4701,19 +4817,12 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
 }
 
 .c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 34px;
+  min-height: 32px;
   font-size: 14px;
   line-height: 20px;
   color: #24292f;
   vertical-align: middle;
+  background-color: #ffffff;
   background-repeat: no-repeat;
   background-position: right 8px center;
   border: 1px solid #d0d7de;
@@ -4721,7 +4830,28 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   cursor: text;
-  padding: 6px 12px;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 > input {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c0 .TextInput-icon {
@@ -4729,7 +4859,6 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   -ms-flex-item-align: center;
   align-self: center;
   color: #57606a;
-  margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -5336,19 +5465,12 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
 }
 
 .c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 34px;
+  min-height: 32px;
   font-size: 14px;
   line-height: 20px;
   color: #24292f;
   vertical-align: middle;
+  background-color: #ffffff;
   background-repeat: no-repeat;
   background-position: right 8px center;
   border: 1px solid #d0d7de;
@@ -5356,7 +5478,28 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   cursor: text;
-  padding: 6px 12px;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 > input {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c0 .TextInput-icon {
@@ -5364,7 +5507,6 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   -ms-flex-item-align: center;
   align-self: center;
   color: #57606a;
-  margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -5976,19 +6118,12 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
 }
 
 .c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 34px;
+  min-height: 32px;
   font-size: 14px;
   line-height: 20px;
   color: #24292f;
   vertical-align: middle;
+  background-color: #ffffff;
   background-repeat: no-repeat;
   background-position: right 8px center;
   border: 1px solid #d0d7de;
@@ -5996,7 +6131,28 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   cursor: text;
-  padding: 6px 12px;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 > input {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .c0 .TextInput-icon {
@@ -6004,7 +6160,6 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   -ms-flex-item-align: center;
   align-self: center;
   color: #57606a;
-  margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
diff --git a/src/stories/TextInput.stories.tsx b/src/stories/TextInput.stories.tsx
index 0d8c9fb8fdc..a5dfdb8fd52 100644
--- a/src/stories/TextInput.stories.tsx
+++ b/src/stories/TextInput.stories.tsx
@@ -43,6 +43,18 @@ export default {
       name: 'Variants',
       options: ['small', 'medium', 'large'],
       control: {type: 'radio'}
+    },
+    validationStatus: {
+      name: 'Validation Status',
+      options: ['warning', 'error'],
+      control: {type: 'radio'}
+    },
+    placeholder: {
+      name: 'Placeholder',
+      defaultValue: 'Hello!',
+      control: {
+        type: 'text'
+      }
     }
   }
 } as Meta
@@ -76,20 +88,70 @@ export const Default = (args: TextInputProps) => {
   )
 }
 
-export const WithLeadingIcon = (args: TextInputProps) => {
+export const WithLeadingVisual = (args: TextInputProps) => {
+  const [value, setValue] = useState('')
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value)
+  }
+
+  const iconInputId = 'text-input-with-leading-icon'
+  const leadingTextId = 'text-input-with-leading-text'
+
+  return (
+    <form>
+      <Label htmlFor={iconInputId}>Example label</Label>
+      <TextInput leadingVisual={CheckIcon} id={iconInputId} value={value} onChange={handleChange} {...args} />
+      <br />
+      <Label htmlFor={leadingTextId}>Enter monies</Label>
+      <TextInput leadingVisual="$" id={leadingTextId} value={value} onChange={handleChange} {...args} />
+    </form>
+  )
+}
+
+export const WithTrailingIcon = (args: TextInputProps) => {
+  const [value, setValue] = useState('')
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value)
+  }
+
+  const iconInputId = 'text-input-with-trailing-icon'
+  const trailingTextInputId = 'text-input-with-trailing-text'
+
+  return (
+    <form>
+      <Label htmlFor={iconInputId}>Example label</Label>
+      <TextInput trailingVisual={CheckIcon} id={iconInputId} value={value} onChange={handleChange} {...args} />
+      <br />
+      <Label htmlFor={trailingTextInputId}>Time in minutes</Label>
+      <TextInput
+        trailingVisual="minutes"
+        id={trailingTextInputId}
+        value={value}
+        onChange={handleChange}
+        sx={{width: '150px'}}
+        {...args}
+        placeholder="200"
+      />
+    </form>
+  )
+}
+
+export const ContrastTextInput = (args: TextInputProps) => {
   const [value, setValue] = useState('')
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value)
   }
 
-  const inputId = 'basic-text-input-with-leading-icon'
+  const inputId = 'contrast-text-input'
 
   return (
     <form>
       <Label htmlFor={inputId}>Example label</Label>
       <br />
-      <TextInput icon={CheckIcon} id={inputId} value={value} onChange={handleChange} type="password" {...args} />
+      <TextInput contrast id={inputId} value={value} onChange={handleChange} {...args} />
     </form>
   )
 }
@@ -111,3 +173,28 @@ export const Password = (args: TextInputProps) => {
     </form>
   )
 }
+
+export const TextInputInWarningState = (args: TextInputProps) => {
+  const [value, setValue] = useState('')
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value)
+  }
+
+  const inputId = 'text-input-with-warning'
+
+  return (
+    <form>
+      <Label htmlFor={inputId}>Password</Label>
+      <br />
+      <TextInput
+        type="password"
+        id={inputId}
+        value={value}
+        validationStatus="warning"
+        onChange={handleChange}
+        {...args}
+      />
+    </form>
+  )
+}