diff --git a/packages/fannypack/package.json b/packages/fannypack/package.json
index 7af00c09d..43d60fd58 100644
--- a/packages/fannypack/package.json
+++ b/packages/fannypack/package.json
@@ -7,7 +7,7 @@
   "unpkg": "dist/fannypack.min.js",
   "types": "ts/index.d.ts",
   "scripts": {
-    "build": "yarn clean && yarn build:lib && yarn build:types",
+    "build": "yarn clean && yarn build:lib",
     "build:lib": "rollup -c",
     "build:types": "tsc --emitDeclarationOnly",
     "clean": "rimraf es/ lib/ dist/ ts/",
@@ -83,5 +83,5 @@
     "accessible",
     "composable"
   ],
-  "gitHead": "613d46b6624167b65e548fe917ecfb5a9a0e2dbe"
+  "gitHead": "7b7ed3a0783df48486e43e6937f33240a8240167"
 }
diff --git a/packages/fannypack/src/Checkbox/styled.ts b/packages/fannypack/src/Checkbox/styled.ts
index 3d857319e..7eef9ac89 100644
--- a/packages/fannypack/src/Checkbox/styled.ts
+++ b/packages/fannypack/src/Checkbox/styled.ts
@@ -7,6 +7,7 @@ import HiddenInput from '../_utils/HiddenInput';
 import { LocalCheckboxProps } from './Checkbox';
 
 export const CheckboxIcon = styled(Box)<{ state?: string }>`
+  background-color: white;
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
diff --git a/packages/fannypack/src/FieldWrapper/FieldWrapper.tsx b/packages/fannypack/src/FieldWrapper/FieldWrapper.tsx
index d0622a1c6..0ee8e43f1 100644
--- a/packages/fannypack/src/FieldWrapper/FieldWrapper.tsx
+++ b/packages/fannypack/src/FieldWrapper/FieldWrapper.tsx
@@ -1,10 +1,29 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { FieldProps as ReakitFieldProps } from 'reakit/ts/Field/Field';
+// @ts-ignore
+import _omit from 'lodash/omit';
+// @ts-ignore
+import _get from 'lodash/get';
 
 import { Box, Flex } from '../primitives';
+import Button from '../Button';
+import Icon from '../Icon';
+import Popover from '../Popover';
+import { LocalPopoverProps, popoverPropTypes } from '../Popover/Popover';
+import Text from '../Text';
+import VisuallyHidden from '../VisuallyHidden';
+import { withTheme } from '../styled';
 import { Omit } from '../types';
-import _FieldWrapper, { Label, DescriptionText, HintText, OptionalText, ValidationText } from './styled';
+import _FieldWrapper, {
+  Label,
+  DescriptionText,
+  HintText,
+  OptionalText,
+  RequiredText,
+  TooltipPopover,
+  ValidationText
+} from './styled';
 
 export type LocalFieldWrapperProps = {
   a11yId?: string;
@@ -16,6 +35,9 @@ export type LocalFieldWrapperProps = {
   isRequired?: boolean;
   label?: string | React.ReactElement<any>;
   state?: string;
+  tooltip?: string | React.ReactElement<any>;
+  tooltipPopoverProps?: Omit<Omit<LocalPopoverProps, 'children'>, 'content'>;
+  tooltipTrigger?: React.ReactElement<any>;
   validationText?: string;
 };
 export type FieldWrapperProps = Omit<ReakitFieldProps, 'label'> & LocalFieldWrapperProps;
@@ -35,17 +57,43 @@ export const FieldWrapper: React.FunctionComponent<LocalFieldWrapperProps> = ({
   isRequired,
   label,
   state,
+  tooltip,
+  tooltipPopoverProps: _tooltipPopoverProps,
+  tooltipTrigger: _tooltipTrigger,
   validationText,
   ...props
 }) => {
+  const tooltipPopoverProps = _get(
+    props,
+    'theme.fannypack.FieldWrapper.defaultProps.tooltipPopoverProps',
+    _tooltipPopoverProps
+  );
+  const tooltipTrigger = _get(props, 'theme.fannypack.FieldWrapper.defaultProps.tooltipTrigger', _tooltipTrigger);
   const elementProps: FieldElementProps = { isRequired, a11yId, state };
   return (
     <_FieldWrapper {...props}>
       {label && (
         <Box marginBottom="minor-2">
-          <Flex alignItems="center">
+          <Flex alignItems="center" lineHeight="1">
             {typeof label === 'string' ? <Label htmlFor={a11yId}>{label}</Label> : label}
             {isOptional && <OptionalText>OPTIONAL</OptionalText>}
+            {isRequired && <RequiredText>*</RequiredText>}
+            {tooltip && (
+              <TooltipPopover
+                isFullWidth
+                placement="bottom-start"
+                content={typeof tooltip === 'string' ? <Text fontSize="150">{tooltip}</Text> : tooltip}
+                gutter={4}
+                {...tooltipPopoverProps}
+              >
+                {tooltipTrigger || (
+                  <Button kind="ghost" size="small" marginLeft="minor-1" minHeight="unset" padding="0.1em 0.5em">
+                    <VisuallyHidden>Toggle tooltip</VisuallyHidden>
+                    <Icon a11yHidden icon="question-circle" />
+                  </Button>
+                )}
+              </TooltipPopover>
+            )}
           </Flex>
           {typeof description === 'string' ? (
             <DescriptionText>{description}</DescriptionText>
@@ -76,6 +124,9 @@ export const fieldWrapperPropTypes = {
   isRequired: PropTypes.bool,
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   state: PropTypes.string,
+  tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  tooltipPopoverProps: PropTypes.shape(_omit(popoverPropTypes, 'children', 'content')),
+  tooltipTrigger: PropTypes.element,
   validationText: PropTypes.string
 };
 FieldWrapper.propTypes = fieldWrapperPropTypes;
@@ -89,10 +140,13 @@ export const fieldWrapperDefaultProps = {
   isRequired: undefined,
   label: undefined,
   state: undefined,
+  tooltip: undefined,
+  tooltipPopoverProps: undefined,
+  tooltipTrigger: undefined,
   validationText: undefined
 };
 FieldWrapper.defaultProps = fieldWrapperDefaultProps;
 
 // @ts-ignore
-const C: React.FunctionComponent<FieldWrapperProps> = FieldWrapper;
+const C: React.FunctionComponent<FieldWrapperProps> = withTheme(FieldWrapper);
 export default C;
diff --git a/packages/fannypack/src/FieldWrapper/styled.ts b/packages/fannypack/src/FieldWrapper/styled.ts
index e5ccd763b..5cd7a0470 100644
--- a/packages/fannypack/src/FieldWrapper/styled.ts
+++ b/packages/fannypack/src/FieldWrapper/styled.ts
@@ -5,6 +5,7 @@ import styled, { space } from '../styled';
 import { Omit } from '../types';
 // @ts-ignore
 import _Label from '../Label';
+import Popover from '../Popover';
 // @ts-ignore
 import _Text from '../Text';
 import { FieldWrapperProps } from './FieldWrapper';
@@ -47,6 +48,24 @@ export const OptionalText = styled(_Text)`
   }
 `;
 
+export const RequiredText = styled(_Text)`
+  color: ${palette('danger')};
+  margin-left: ${space(1)}rem;
+  line-height: 1;
+
+  & {
+    ${theme('fannypack.FieldWrapper.required')};
+  }
+`;
+
+export const TooltipPopover = styled(Popover)`
+  padding: ${space(1, 'major')}rem;
+
+  & {
+    ${theme('fannypack.FieldWrapper.TooltipPopover.base')};
+  }
+`;
+
 export const ValidationText = styled(_Text)`
   display: block;
   font-size: 0.8rem;
diff --git a/packages/fannypack/src/Input/Input.tsx b/packages/fannypack/src/Input/Input.tsx
index a341cd079..e90da2b20 100644
--- a/packages/fannypack/src/Input/Input.tsx
+++ b/packages/fannypack/src/Input/Input.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { InputProps as ReakitInputProps } from 'reakit/ts';
+// @ts-ignore
+import _omit from 'lodash/omit';
 
 import { InlineFlex } from '../primitives';
 import { Omit, Size, sizePropType } from '../types';
@@ -20,10 +22,10 @@ export type LocalInputProps = {
   children?: React.ReactNode;
   className?: string;
   /** Default value of the input */
-  defaultValue?: string;
+  defaultValue?: string | string[];
   /** Disables the input */
   disabled?: boolean;
-  inputProps?: ReakitInputProps;
+  inputProps?: Omit<ReakitInputProps, 'ref'>;
   inputRef?: React.RefObject<any>;
   /** Adds a cute loading indicator to the input field */
   isLoading?: boolean;
@@ -34,11 +36,11 @@ export type LocalInputProps = {
   /** Alters the size of the input. Can be "small", "medium" or "large" */
   size?: Size;
   /** The maximum (numeric or date-time) value for the input. Must not be less than its minimum (min attribute) value. */
-  max?: number;
+  max?: number | string;
   /** If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the maximum number of characters (in UTF-16 code units) that the user can enter. For other control types, it is ignored. */
   maxLength?: number;
   /** The minimum (numeric or date-time) value for this input, which must not be greater than its maximum (max attribute) value. */
-  min?: number;
+  min?: number | string;
   /** If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the minimum number of characters (in UTF-16 code points) that the user can enter. For other control types, it is ignored. */
   minLength?: number;
   /** This prop indicates whether the user can enter more than one value. This attribute only applies when the type attribute is set to email or file. */
@@ -52,13 +54,13 @@ export type LocalInputProps = {
   /** Setting the value of this attribute to true indicates that the element needs to have its spelling and grammar checked. The value default indicates that the element is to act according to a default behavior, possibly based on the parent element's own spellcheck value. The value false indicates that the element should not be checked. */
   spellCheck?: boolean;
   /** Works with the min and max attributes to limit the increments at which a numeric or date-time value can be set. */
-  step?: number;
+  step?: number | string;
   /** State of the input. Can be any color in the palette. */
   state?: string;
   /** Specify the type of input. */
   type?: string;
   /** Value of the input */
-  value?: string;
+  value?: string | number | string[];
   /** Function to invoke when focus is lost */
   onBlur?: React.FocusEventHandler<HTMLInputElement>;
   /** Function to invoke when input has changed */
@@ -145,7 +147,7 @@ export const Input: React.FunctionComponent<LocalInputProps> & InputComponents =
       styledSize={size}
       type={type}
       value={value}
-      {...inputProps}
+      {..._omit(inputProps, 'size')}
     />
     {isLoading && <LoadingSpinner color="text" size="small" />}
   </InputWrapper>
diff --git a/packages/fannypack/src/Radio/styled.ts b/packages/fannypack/src/Radio/styled.ts
index db50aa37c..52cde69f5 100644
--- a/packages/fannypack/src/Radio/styled.ts
+++ b/packages/fannypack/src/Radio/styled.ts
@@ -9,6 +9,7 @@ import { RadioProps, LocalRadioProps } from './Radio';
 
 export const RadioIcon = styled(Box)<{ state?: string }>`
   border: 1px solid #bdbdbd;
+  background-color: white;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 100%;
   height: 1em;
diff --git a/packages/fannypack/src/Select/Select.tsx b/packages/fannypack/src/Select/Select.tsx
index 05e322eeb..36a94297b 100644
--- a/packages/fannypack/src/Select/Select.tsx
+++ b/packages/fannypack/src/Select/Select.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { InlineBlockProps as ReakitInlineBlockProps } from 'reakit/ts/InlineBlock/InlineBlock';
+import { InputProps as ReakitInputProps } from 'reakit/ts/Input/Input';
 
 import { InlineBlock } from '../primitives';
 import { Omit } from '../types';
@@ -33,7 +34,7 @@ export type LocalSelectProps = {
   options: Array<{ label: string; value: string; disabled?: boolean }>;
   /** Hint text to display */
   placeholder?: string;
-  selectProps: ReakitInputProps;
+  selectProps?: ReakitInputProps;
   /** Alters the size of the select field. Can be "small", "medium" or "large" */
   size?: string;
   /** State of the select field. Can be any color in the palette. */
@@ -161,7 +162,11 @@ export class Select extends React.PureComponent<LocalSelectProps, SelectState> {
           value={value}
           {...selectProps}
         >
-          {placeholder && <option disabled>{placeholder}</option>}
+          {placeholder && (
+            <option disabled value="">
+              {placeholder}
+            </option>
+          )}
           {options.map((option, i) => (
             <option
               key={i} // eslint-disable-line
diff --git a/packages/fannypack/src/themes/default/Icon.ts b/packages/fannypack/src/themes/default/Icon.ts
index f8b3cde77..a0593a192 100644
--- a/packages/fannypack/src/themes/default/Icon.ts
+++ b/packages/fannypack/src/themes/default/Icon.ts
@@ -4,6 +4,7 @@ import * as faInfoCircle from '@fortawesome/free-solid-svg-icons/faInfoCircle';
 import * as faExclamationTriangle from '@fortawesome/free-solid-svg-icons/faExclamationTriangle';
 import * as faCheckCircle from '@fortawesome/free-solid-svg-icons/faCheckCircle';
 import * as faExclamationCircle from '@fortawesome/free-solid-svg-icons/faExclamationCircle';
+import * as faQuestionCircle from '@fortawesome/free-solid-svg-icons/faQuestionCircle';
 import * as faTimes from '@fortawesome/free-solid-svg-icons/faTimes';
 import * as faSearch from '@fortawesome/free-solid-svg-icons/faSearch';
 
@@ -23,9 +24,12 @@ const parseOverrideIcons = (
 export default (overrides: any) => ({
   ..._get(overrides, 'Icon', {}),
   icons: {
-    ...parseIcons([faInfoCircle, faExclamationTriangle, faCheckCircle, faExclamationCircle, faTimes, faSearch], {
-      type: 'font-awesome-standalone'
-    }),
+    ...parseIcons(
+      [faInfoCircle, faExclamationTriangle, faCheckCircle, faExclamationCircle, faQuestionCircle, faTimes, faSearch],
+      {
+        type: 'font-awesome-standalone'
+      }
+    ),
     ...parseOverrideIcons(_get(overrides, 'Icon.iconSets', [])),
     ..._get(overrides, 'Icon.icons', {})
   },
diff --git a/packages/fannypack/src/types/theme.ts b/packages/fannypack/src/types/theme.ts
index dbd20b976..b375a4a2d 100644
--- a/packages/fannypack/src/types/theme.ts
+++ b/packages/fannypack/src/types/theme.ts
@@ -165,6 +165,13 @@ export type FieldWrapperThemeConfig = {
   hint?: Stylesheet;
   optional?: Stylesheet;
   validation?: Stylesheet;
+  TooltipPopover?: {
+    base?: Stylesheet;
+  };
+  defaultProps?: {
+    tooltipTrigger?: any;
+    tooltipPopoverProps?: Object;
+  };
 };
 export type FieldSetThemeConfig = {
   base?: Stylesheet;
diff --git a/packages/website/pages/form/fieldwrapper.mdx b/packages/website/pages/form/fieldwrapper.mdx
index 9a23702ac..ba9b9b217 100644
--- a/packages/website/pages/form/fieldwrapper.mdx
+++ b/packages/website/pages/form/fieldwrapper.mdx
@@ -19,6 +19,62 @@ The `<FieldWrapper>` component is a utility belt that wraps around form elements
 </FieldWrapper>
 ```
 
+### Tooltips
+
+You can show a tooltip by supplying a string or an element to the `tooltip` prop.
+
+```.jsx
+<FieldWrapper a11yId="username" label="Username" tooltip="Your username must be awesome.">
+  <Input />
+</FieldWrapper>
+```
+
+```.jsx
+<FieldWrapper
+  a11yId="username"
+  label="Username"
+  tooltip={
+    <Text fontSize="150">Your username must be <Text fontWeight="bold">awesome.</Text></Text>
+  }
+>
+  <Input />
+</FieldWrapper>
+```
+
+#### Custom tooltip trigger
+
+You can modify the tooltip trigger button by supplying an element to the `tooltipTrigger` prop.
+
+```.jsx
+<FieldWrapper
+  a11yId="username"
+  label="Username"
+  tooltip="Your username must be awesome."
+  tooltipTrigger={<Button size="small" minHeight="unset">Tooltip</Button>}
+>
+  <Input />
+</FieldWrapper>
+```
+
+Or you can set a default trigger via `defaultProps` [in the theme](#theming)
+
+#### Custom tooltip popover props
+
+You can modify the tooltip popover props by supplying `tooltipPopoverProps`.
+
+```.jsx
+<FieldWrapper
+  a11yId="username"
+  label="Username"
+  tooltip="Your username must be awesome."
+  tooltipPopoverProps={{ placement: 'top-start' }}
+>
+  <Input />
+</FieldWrapper>
+```
+
+Or you can set a default popover props via `defaultProps` [in the theme](#theming)
+
 ### Descriptions
 
 The description text is placed underneath the label.
@@ -51,8 +107,6 @@ To indicate a field as optional, add the `isOptional` prop.
 
 ### Required fields
 
-Required fields don't show any visual feedback. Displaying 'optional' labels (as above) instead of a red astrix is more descriptive, less fearful, and accessible. However, adding the `isRequired` prop to the field will enable screen readers to identify required fields.
-
 ```.jsx
 <FieldWrapper a11yId="username" label="Username" isRequired>
   <Input />
@@ -141,7 +195,16 @@ Required fields don't show any visual feedback. Displaying 'optional' labels (as
     description: css | Object,
     hint: css | Object,
     optional: css | Object,
-    validation: css | Object
+    validation: css | Object,
+
+    TooltipPopover: {
+      base: css | Object
+    },
+
+    defaultProps: {
+      tooltipPopoverProps: Object
+      tooltipTrigger: ReactElement
+    }
   }
 }
 ```
diff --git a/packages/website/utils/routes.js b/packages/website/utils/routes.js
index 61a3b717d..988bd6225 100644
--- a/packages/website/utils/routes.js
+++ b/packages/website/utils/routes.js
@@ -46,7 +46,7 @@ export default [
   { menu: 'Form', name: 'FieldWrapper', path: '/form/fieldwrapper', breakpoint: 'tablet' },
   { menu: 'Form', name: 'Input', path: '/form/input', breakpoint: 'tablet' },
   { menu: 'Form', name: 'Label', path: '/form/label', breakpoint: 'tablet' },
-  { menu: 'Form', name: 'Radio', path: '/form/ra  dio', breakpoint: 'tablet' },
+  { menu: 'Form', name: 'Radio', path: '/form/radio', breakpoint: 'tablet' },
   { menu: 'Form', name: 'RadioGroup', path: '/form/radiogroup', breakpoint: 'tablet' },
   { menu: 'Form', name: 'Select', path: '/form/select', breakpoint: 'tablet' },
   { menu: 'Form', name: 'SelectMenu', path: '/form/selectmenu', breakpoint: 'tablet' },
diff --git a/yarn.lock b/yarn.lock
index 613785696..c65021305 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10531,14 +10531,6 @@ react-error-overlay@4.0.0:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.0.tgz#d198408a85b4070937a98667f500c832f86bd5d4"
   integrity sha512-FlsPxavEyMuR6TjVbSSywovXSEyOg6ZDj5+Z8nbsRl9EkOzAhEIcS+GLoQDC5fz/t9suhUXWmUrOBrgeUvrMxw==
 
-react-input-mask@2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/react-input-mask/-/react-input-mask-2.0.4.tgz#9ade5cf8196f4a856dbf010820fe75a795f3eb14"
-  integrity sha512-1hwzMr/aO9tXfiroiVCx5EtKohKwLk/NT8QlJXHQ4N+yJJFyUuMT+zfTpLBwX/lK3PkuMlievIffncpMZ3HGRQ==
-  dependencies:
-    invariant "^2.2.4"
-    warning "^4.0.2"
-
 react-is@^16.6.0, react-is@^16.8.1, react-is@^16.8.3, react-is@^16.8.4:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
@@ -13099,13 +13091,6 @@ walker@~1.0.5:
   dependencies:
     makeerror "1.0.x"
 
-warning@^4.0.2:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
-  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
-  dependencies:
-    loose-envify "^1.0.0"
-
 watch@~0.18.0:
   version "0.18.0"
   resolved "https://registry.yarnpkg.com/watch/-/watch-0.18.0.tgz#28095476c6df7c90c963138990c0a5423eb4b986"