diff --git a/docs/components/Code.js b/docs/components/Code.js
index 5d1ab04fad..6ed29a7588 100644
--- a/docs/components/Code.js
+++ b/docs/components/Code.js
@@ -5,7 +5,6 @@ import * as React from 'react'
 import { LivePreview, LiveProvider } from 'react-live'
 import theme from 'prism-react-renderer/themes/nightOwl'
 import NextLink from 'next/link'
-import { Form as FinalForm } from 'react-final-form'
 import dateFR from 'date-fns/locale/fr'
 import * as yup from 'yup'
 import { Controller } from 'react-hook-form'
@@ -20,7 +19,6 @@ import { Breadcrumb } from '@welcome-ui/breadcrumb'
 import { Button } from '@welcome-ui/button'
 import { Card } from '@welcome-ui/card'
 import { Checkbox } from '@welcome-ui/checkbox'
-import { ConnectedField } from '@welcome-ui/connected-field'
 import { DatePicker } from '@welcome-ui/date-picker'
 import { DateTimePicker } from '@welcome-ui/date-time-picker'
 import * as DropdownMenu from '@welcome-ui/dropdown-menu'
@@ -68,7 +66,6 @@ import * as Emoji from '@welcome-ui/emoji'
 
 import * as constants from '../constants'
 
-import { Form } from './Form'
 import { HookForm } from './HookForm'
 import { IconsList } from './IconsList'
 import * as S from './Code.styled'
@@ -137,7 +134,6 @@ export function Code({ children, className, isCopyable = true, live = true, row
       Checkbox,
       CodeContent: S.CodeContent,
       CodeContentRow: S.CodeContentRow,
-      ConnectedField,
       constants,
       Controller,
       dateFR,
@@ -152,8 +148,6 @@ export function Code({ children, className, isCopyable = true, live = true, row
       FileDrop,
       ...Files,
       FileUpload,
-      FinalForm,
-      Form,
       Group,
       Hint,
       HookForm,
@@ -199,7 +193,13 @@ export function Code({ children, className, isCopyable = true, live = true, row
   if (live === true && language === 'jsx') {
     return (
       <LiveProvider {...liveProviderProps}>
-        <S.LivePreview className="codeEditor">
+        <Card
+          className="codeEditor"
+          display="flex"
+          flexDirection="column"
+          mb="md"
+          overflow="visible"
+        >
           <Card.Body color="dark.900" padding="xl" paddingBottom="lg">
             <LivePreview />
             <S.ShowEditor>
@@ -209,7 +209,7 @@ export function Code({ children, className, isCopyable = true, live = true, row
               </Button>
             </S.ShowEditor>
           </Card.Body>
-        </S.LivePreview>
+        </Card>
         {editorOpen && (
           <S.LiveEditor>
             <S.LiveEditorContent onChange={handleChange} padding={20} style={liveEditorStyle} />
diff --git a/docs/components/Code.styled.js b/docs/components/Code.styled.js
index bbafc16020..1e4c298098 100644
--- a/docs/components/Code.styled.js
+++ b/docs/components/Code.styled.js
@@ -1,7 +1,6 @@
 import styled from '@xstyled/styled-components'
 import { th } from '@xstyled/system'
 import { LiveEditor as ReactLiveEditor, LiveError as ReactLiveError } from 'react-live'
-import { Card } from '@welcome-ui/card'
 import { Box } from '@welcome-ui/box'
 
 export const LiveEditor = styled(Box)`
@@ -38,13 +37,6 @@ export const LiveError = styled(ReactLiveError)`
   margin: xxs 0 lg;
 `
 
-export const LivePreview = styled(Card)`
-  display: flex;
-  flex-direction: column;
-  overflow: visible;
-  margin-bottom: md;
-`
-
 export const ShowEditor = styled.div`
   padding-top: sm;
   margin-top: xl;
diff --git a/docs/components/Form.js b/docs/components/Form.js
deleted file mode 100644
index 5d8ca685f3..0000000000
--- a/docs/components/Form.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/* eslint-disable react/jsx-handler-names */
-/* eslint-disable no-console */
-
-import React from 'react'
-import { Form as FinalForm } from 'react-final-form'
-import { Box } from '@welcome-ui/box'
-
-import { Code } from './Code'
-
-// eslint-disable-next-line react/prop-types
-export const Form = ({ children, initialValues, validate }) => (
-  <FinalForm initialValues={initialValues} onSubmit={console.debug} validate={validate}>
-    {({ handleSubmit, values }) => (
-      <>
-        <form onSubmit={handleSubmit}>{children}</form>
-        <Box data-testid="values">
-          {Object.keys(values).length > 0 && (
-            <Code isCopyable={false} language="json">
-              {JSON.stringify(values, 0, 2)}
-            </Code>
-          )}
-        </Box>
-      </>
-    )}
-  </FinalForm>
-)
-
-export const getFormValues = node =>
-  node.querySelector('pre') ? JSON.parse(node.querySelector('pre').textContent) : {}
diff --git a/docs/components/Header.js b/docs/components/Header.js
index 708518d0be..207b3f51c8 100644
--- a/docs/components/Header.js
+++ b/docs/components/Header.js
@@ -17,7 +17,7 @@ import { Navigation } from './Navigation'
 import { SelectTheme } from './SelectTheme'
 import * as S from './Header.styled'
 
-export const Header = () => {
+export function Header() {
   const modal = useModalState()
   const theme = useThemeContext()
 
@@ -26,7 +26,7 @@ export const Header = () => {
       window.docsearch({
         apiKey: '85801aa252bde17259c4a5a61c1e84db',
         indexName: 'welcome-ui',
-        inputSelector: '#search-algolia'
+        inputSelector: '#search-algolia',
       })
     }
   }, [])
@@ -75,14 +75,14 @@ export const Header = () => {
         <SelectTheme id="navigation" />
       </Box>
       <Box display={{ xs: 'none', md: 'block' }} mt="md" w="100%">
-        <Field
-          component={InputText}
-          icon={<SearchIcon color="light.100" size="sm" />}
-          isClearable
-          name="search-algolia"
-          placeholder="Search"
-          size="sm"
-        />
+        <Field size="sm">
+          <InputText
+            icon={<SearchIcon color="light.100" size="sm" />}
+            isClearable
+            name="search-algolia"
+            placeholder="Search"
+          />
+        </Field>
       </Box>
       <Box
         display={{ xs: 'none', md: 'block' }}
diff --git a/docs/pages/components/checkbox.mdx b/docs/pages/components/checkbox.mdx
index f6c408cd61..9ab7937a71 100644
--- a/docs/pages/components/checkbox.mdx
+++ b/docs/pages/components/checkbox.mdx
@@ -19,13 +19,70 @@ import {
 ## Usage
 
 ```jsx
-<Form initialValues={{ vue: true }}>
-  <FieldGroup label="Check the frameworks you have already worked with">
-    <ConnectedField component={Checkbox} name="react" label="React" />
-    <ConnectedField component={Checkbox} label="Angular" name="angular" id="angular_custom_id" />
-    <ConnectedField component={Checkbox} name="vue" label="Vue" />
-  </FieldGroup>
-</Form>
+function() {
+  const FormChildren = ({ control, register }) => (
+    <FieldGroup label="Check the frameworks you have already worked with">
+      <Controller
+        name="react"
+        control={control}
+        render={({ onChange, value}) => (
+            <Field label="React">
+              <Checkbox
+                name="react"
+                onChange={e => onChange(!e.target.checked)}
+                checked={value}
+              />
+            </Field>
+          )
+         }
+      />
+      <Controller
+        name="angular"
+        control={control}
+        render={({ onChange, value}) => (
+            <Field label="Angular">
+              <Checkbox
+                name="angular"
+                onChange={e => onChange(!e.target.checked)}
+                checked={value}
+              />
+            </Field>
+          )
+         }
+      />
+      <Controller
+        name="vue"
+        control={control}
+        render={({ onChange, value}) => (
+            <Field label="Vue">
+              <Checkbox
+                name="vue"
+                onChange={e => onChange(!e.target.checked)}
+                checked={value}
+              />
+            </Field>
+          )
+         }
+      />
+    </FieldGroup>
+  )
+
+  return (
+    <HookForm
+      defaultValues={{ vue: true }}
+      schemaValidate={() =>
+        yup.object().shape({
+          react: yup.boolean().required().oneOf([true, false]),
+          angular: yup.boolean().required().oneOf([true, false]),
+          vue: yup.boolean().required().oneOf([true, false]),
+        })
+      }
+    >
+      <FormChildren />
+    </HookForm>
+  )
+}
+
 ```
 
 ## Standalone
diff --git a/docs/pages/components/date-picker.mdx b/docs/pages/components/date-picker.mdx
index 5894210323..940c856a44 100644
--- a/docs/pages/components/date-picker.mdx
+++ b/docs/pages/components/date-picker.mdx
@@ -21,46 +21,81 @@ It is based on the [react-datepicker](https://github.com/Hacker0x01/react-datepi
 ## Simple use case
 
 ```jsx
-<Form initialValues={{ welcome: Date.now() }}>
-  <ConnectedField component={DatePicker} label="Date" name="welcome" />
-</Form>
+function () {
+  const [value, setValue] = useState(Date.now())
+
+  const handleChange = newValue => {
+    setValue(newValue)
+  }
+
+  return (
+    <Field label="Date">
+      <DatePicker name="welcome" onChange={handleChange} value={value} />
+    </Field>
+  )
+}
 ```
 
 ## Pass props from the original library.
 
 ```jsx
-<Form initialValues={{ welcome2: Date.now() }}>
-  <ConnectedField
-    component={DatePicker}
-    dateFormat="MMM dd yyyy"
-    label="Date"
-    maxDate={new Date()}
-    name="welcome2"
-    popperProps={{ zIndex: 50 }}
-    yearDropdownItemNumber={30}
-  />
-</Form>
+function () {
+  const [value, setValue] = useState(Date.now())
+
+  const handleChange = newValue => {
+    setValue(newValue)
+  }
+
+  return (
+    <Field label="Date">
+      <DatePicker
+        dateFormat="MMM dd yyyy"
+        name="welcome2"
+        maxDate={new Date()}
+        popperProps={{ zIndex: 50 }}
+        yearDropdownItemNumber={30}
+        onChange={handleChange}
+        value={value}
+      />
+    </Field>
+  )
+}
 ```
 
 ## Give an Icon
 
 ```jsx
-<Form initialValues={{ welcome3: Date.now() }}>
-  <ConnectedField
-    component={DatePicker}
-    icon={<DateIcon color="light.100" />}
-    label="Date"
-    name="welcome3"
-  />
-</Form>
+function () {
+  const [value, setValue] = useState(Date.now())
+
+  const handleChange = newValue => {
+    setValue(newValue)
+  }
+
+  return (
+    <Field label="Date">
+      <DatePicker icon={<DateIcon color="light.100" />} name="welcome3" value={value} onChange={handleChange} />
+    </Field>
+  )
+}
 ```
 
 ## fr locale
 
 ```jsx
-<Form initialValues={{}}>
-  <ConnectedField component={DatePicker} label="Date" locale={dateFR} name="welcome4" />
-</Form>
+function () {
+  const [value, setValue] = useState(Date.now())
+
+  const handleChange = newValue => {
+    setValue(newValue)
+  }
+
+  return (
+    <Field label="Date">
+      <DatePicker locale={dateFR} name="welcome4" value={value} onChange={handleChange} />
+    </Field>
+  )
+}
 ```
 
 ## Properties
diff --git a/docs/pages/components/date-time-picker.mdx b/docs/pages/components/date-time-picker.mdx
index b0cefd6071..bbf7c48f20 100644
--- a/docs/pages/components/date-time-picker.mdx
+++ b/docs/pages/components/date-time-picker.mdx
@@ -23,28 +23,48 @@ _Note_: Pass a value of `null` if you don't want the default value of `Date.now(
 ## Simple use case
 
 ```jsx
-<Form initialValues={{ welcome: Date.now() }}>
-  <ConnectedField component={DateTimePicker} label="Date" name="welcome" />
-</Form>
+function () {
+  const [value, setValue] = useState(Date.now())
+
+  const handleChange = newValue => {
+    setValue(newValue)
+  }
+
+  return (
+    <Field label="Date">
+      <DateTimePicker name="welcome" onChange={handleChange} value={value} />
+    </Field>
+  )
+}
 ```
 
 ## Pass props to DatePicker
 
 ```jsx
-<Form initialValues={{ welcome2: Date.now() }}>
-  <ConnectedField
-    component={DateTimePicker}
-    dateFormat="MMM dd yyyy"
-    label="Date"
-    name="welcome2"
-    popperProps={{ zIndex: 50 }}
-    showMonthDropdown
-    showYearDropdown
-  >
-    <DatePicker icon={<DateIcon />} iconPlacement="right" />
-    <TimePicker />
-  </ConnectedField>
-</Form>
+function () {
+  const [value, setValue] = useState(Date.now())
+
+  const handleChange = newValue => {
+    setValue(newValue)
+  }
+
+  return (
+    <Field label="Date">
+      <DateTimePicker
+        dateFormat="MMM dd yyyy"
+        name="welcome2"
+        popperProps={{ zIndex: 50 }}
+        showMonthDropdown
+        showYearDropdown
+        onChange={handleChange}
+        value={value}
+      >
+        <DatePicker icon={<DateIcon />} iconPlacement="right" />
+        <TimePicker />
+      </DateTimePicker>
+    </Field>
+  )
+}
 ```
 
 ## Properties
diff --git a/docs/pages/components/drawer.mdx b/docs/pages/components/drawer.mdx
index 2ec216d737..99d4267827 100644
--- a/docs/pages/components/drawer.mdx
+++ b/docs/pages/components/drawer.mdx
@@ -107,19 +107,18 @@ function PlacementDrawer() {
   return (
     <>
       <Box mb="xl">
-        <Field
-          label="Placement"
-          component={RadioGroup}
-          value={placement}
-          onChange={e => setPlacement(e.target.value)}
-          options={[
-            { value: 'top', label: 'Top' },
-            { value: 'right', label: 'Right' },
-            { value: 'bottom', label: 'Bottom' },
-            { value: 'left', label: 'Left' },
-          ]}
-          flexDirection="row"
-        />
+        <Field label="Placement" flexDirection="row">
+          <RadioGroup
+            value={placement}
+            onChange={e => setPlacement(e.target.value)}
+            options={[
+              { value: 'top', label: 'Top' },
+              { value: 'right', label: 'Right' },
+              { value: 'bottom', label: 'Bottom' },
+              { value: 'left', label: 'Left' },
+            ]}
+          />
+        </Field>
       </Box>
       <Drawer.Trigger as={Button} {...drawer}>
         Open Drawer
@@ -148,41 +147,39 @@ function SizeDrawer() {
   return (
     <>
       <Box mb="xl">
-        <Field
-          label="Size"
-          component={RadioGroup}
-          value={size}
-          onChange={e => setSize(e.target.value)}
-          options={[
-            { value: 'sm', label: 'sm' },
-            { value: 'md', label: 'md' },
-            { value: 'lg', label: 'lg' },
-            {
-              value: '50%',
-              label: (
-                <>
-                  50% <small>(width or height depending on the placement</small>
-                </>
-              ),
-            },
-          ]}
-          flexDirection="row"
-        />
+        <Field label="Size" flexDirection="row">
+          <RadioGroup
+            value={size}
+            onChange={e => setSize(e.target.value)}
+            options={[
+              { value: 'sm', label: 'sm' },
+              { value: 'md', label: 'md' },
+              { value: 'lg', label: 'lg' },
+              {
+                value: '50%',
+                label: (
+                  <>
+                    50% <small>(width or height depending on the placement</small>
+                  </>
+                ),
+              },
+            ]}
+          />
+        </Field>
       </Box>
       <Box mb="xl">
-        <Field
-          label="Placement"
-          component={RadioGroup}
-          value={placement}
-          onChange={e => setPlacement(e.target.value)}
-          options={[
-            { value: 'top', label: 'Top' },
-            { value: 'right', label: 'Right' },
-            { value: 'bottom', label: 'Bottom' },
-            { value: 'left', label: 'Left' },
-          ]}
-          flexDirection="row"
-        />
+        <Field label="Placement" flexDirection="row">
+          <RadioGroup
+            value={placement}
+            onChange={e => setPlacement(e.target.value)}
+            options={[
+              { value: 'top', label: 'Top' },
+              { value: 'right', label: 'Right' },
+              { value: 'bottom', label: 'Bottom' },
+              { value: 'left', label: 'Left' },
+            ]}
+          />
+        </Field>
       </Box>
       <Drawer.Trigger as={Button} {...drawer}>
         Open Drawer
diff --git a/docs/pages/components/field.mdx b/docs/pages/components/field.mdx
index 4199ba87b8..eb458fdb2b 100644
--- a/docs/pages/components/field.mdx
+++ b/docs/pages/components/field.mdx
@@ -12,7 +12,7 @@ import {
 
 <tagversion version={version} name={name} component={component} />
 
-We recommend using [Final Form](https://github.com/final-form/react-final-form), [Redux Form](https://github.com/erikras/redux-form) or [Formik](https://github.com/jaredpalmer/formik) with these components. If so, use `ConnectedField` for your fields (as in the examples below). The examples below give you an overview of common props (e.g. `size`, `disable`, `required` etc.)
+We recommend using [React-hook-form](https://react-hook-form.com/) or [Formik](https://github.com/jaredpalmer/formik) with these components. If so, use `Field` for your fields (as in the examples below). The examples below give you an overview of common props (e.g. `size`, `disable`, `required` etc.)
 
 You can find props for each field component in the other `Forms` pages.
 
@@ -20,197 +20,60 @@ You can find props for each field component in the other `Forms` pages.
 
 <usage component={component} name={name} peerDependencies={peerDependencies} />
 
-## Sizes
-
-```jsx
-<Form initialValues={{}}>
-  <>
-    <ConnectedField
-      name="small"
-      placeholder="Placeholder"
-      component={InputText}
-      label="I'm a small sized field"
-      size="sm"
-      mb="xl"
-    />
-    <ConnectedField
-      name="medium"
-      placeholder="Placeholder"
-      component={InputText}
-      label="I'm a medium sized field"
-      size="md"
-      mb="xl"
-    />
-    <ConnectedField
-      name="large"
-      placeholder="Placeholder"
-      component={InputText}
-      label="I'm a large sized field which is my default size"
-      mb="xl"
-    />
-  </>
-</Form>
-```
-
 ## Variants
 
 ```jsx
-<Form initialValues={{}}>
-  <>
-    <ConnectedField
-      name="default"
-      placeholder="Placeholder"
-      component={InputText}
-      label="Label"
-      hint="A hint"
-      mb="xl"
-    />
-    <ConnectedField
-      name="warning"
-      placeholder="Placeholder"
-      component={InputText}
-      label="Label"
-      warning="A warning"
-      mb="xl"
-    />
-    <ConnectedField
-      name="error"
-      placeholder="Placeholder"
-      component={InputText}
-      label="Label"
-      error="An error"
-      mb="xl"
-    />
-  </>
-</Form>
+<Field label="Label" hint="A hint">
+  <InputText name="default" placeholder="Placeholder" />
+</Field>
+<Field label="Label" warning="A warning">
+  <InputText name="warning" placeholder="Placeholder" />
+</Field>
+<Field label="Label" error="An error">
+  <InputText name="error" placeholder="Placeholder" />
+</Field>
 ```
 
 ## Disabled
 
 ```jsx
-<Form initialValues={{ disabled: 'Disabled value' }}>
-  <ConnectedField
-    name="disabled"
-    placeholder="Placeholder"
-    component={InputText}
-    label="Label"
-    disabled
-  />
-</Form>
+<Field label="Label" disabled>
+  <InputText name="disabled" placeholder="Placeholder" />
+</Field>
 ```
 
 ## Required
 
 ```jsx
-<Form initialValues={{}}>
-  <ConnectedField
-    name="required"
-    placeholder="Placeholder"
-    component={InputText}
-    label="Label"
-    required
-  />
-</Form>
+<Field label="Label" required>
+  <InputText name="required" placeholder="Placeholder" />
+</Field>
 ```
 
 ## Refs
 
-You can create a `ref`\* and pass it to a component to access the underlying DOM element.
-
-Note: `ref`s can be created with either `React.createRef()` or `React.useRef(null)` for functional components or a callback ref if using a React `class`.
-
 ```jsx
-function() {
-  const connectedInputRef = createRef()
-  const normalInputRef = useRef(null)
-  const nakedInputRef = useRef(null)
-  const fileUploadRef = useRef(null)
-  const buttonRef = useRef(null)
-  const linkRef = useRef(null)
-
-  const handleConnectedClick = () => {
-    connectedInputRef.current.focus()
-  }
-
-  const handleNormalClick = () => {
-    normalInputRef.current.focus()
-  }
-
-  const handleNakedClick = () => {
-    nakedInputRef.current.focus()
-  }
-
-  const handleFileUploadClick = () => {
-    fileUploadRef.current.focus()
-  }
-
-  const handleButtonClick = () => {
-    console.debug('<Button> ref', buttonRef)
-  }
+function () {
+  const inputRef = React.useRef(null)
 
-  const handleLinkClick = () => {
-    console.debug('<Link> ref', linkRef)
+  const handleClick = () => {
+    inputRef.current.focus()
   }
 
-return (
-    <Form>
-      <ConnectedField
-        component={InputText}
-        label="Connected field"
-        name="firstName"
-        ref={connectedInputRef}
-      />
-      <Field
-        name="lastName"
-        component={InputText}
-        label="Normal field"
-        ref={normalInputRef}
-        onChange={() => console.log('changed!')}
-        mb="sm"
-      />
-      <Label>Naked field</Label>
-      <InputText name="naked" ref={nakedInputRef} mb="sm" />
-      <Field
-        name="avatar"
-        component={FileUpload}
-        label="Complex field"
-        onChange={() => console.log('changed!')}
-        ref={fileUploadRef}
-        mb="sm"
-      />
-      <Box mt="xl" mb="sm">
-        Click a button below to focus the relevant field above
-      </Box>
-      <Button onClick={handleConnectedClick}>Connected field</Button>
-      <Button onClick={handleNormalClick} ml={20}>
-        Normal field
-      </Button>
-      <Button onClick={handleNakedClick} ml={20}>
-        Naked field
-      </Button>
-      <Button onClick={handleFileUploadClick} ml={20}>
-        File upload field
-      </Button>
-      <Box mt="xl" mb="sm">
-        Click the button below to read the button's ref in the console
-      </Box>
-      <Button ref={buttonRef} onClick={handleButtonClick}>
-        Test button
-      </Button>
-      <Box mt="xl" mb="sm">
-        Click the link below to read the link's ref in the console
-      </Box>
-      <Link ref={linkRef} onClick={handleLinkClick}>
-        Test link
-      </Link>
-    </Form>
+  return (
+    <>
+      <Field label="I'm a field with a ref on my child component">
+        <InputText ref={inputRef} />
+      </Field>
+      <Button mt="md" onClick={handleClick}>Focus InputText</Button>
+    </>
   )
 }
 ```
 
 ## Properties
 
-<props propTypes={props.propTypes.ConnectedField} />
+<props propTypes={props.propTypes.Field} />
 
 ## Dependencies
 
diff --git a/docs/pages/components/file-drop.mdx b/docs/pages/components/file-drop.mdx
index afc11ba805..ddad65d563 100644
--- a/docs/pages/components/file-drop.mdx
+++ b/docs/pages/components/file-drop.mdx
@@ -33,20 +33,27 @@ By default, `accept`: is set to `image/*`, see more about [media type](https://w
 
 ```jsx
 function() {
+  const [value, setValue] = useState(null)
+
+  const handleChange = (event) => {
+    setValue(event.target.value)
+  }
+
   return (
-    <Form initialValues={{}}>
-      <ConnectedField
-        component={FileDrop}
+    <Field
+      label="Your file"
+      hint="Files must be < 2MB"
+      required
+    >
+      <FileDrop
         name="file"
-        label="Your file"
-        hint="Files must be < 2MB"
-        required
         isClearable
         isEditable
-        handleAddFile={console.debug}
-        handleRemoveFile={console.debug}
+        handleAddFile={handleChange}
+        handleRemoveFile={handleChange}
+        value={value}
       />
-    </Form>
+    </Field>
   )
 }
 ```
@@ -56,45 +63,52 @@ function() {
 ### Image
 
 ```jsx
-<Form
-  initialValues={{
-    avatar:
-      'https://media3.giphy.com/media/uYiJD8fcWDys8/giphy.gif?cid=790b76115d08fb457747437951ff7674&rid=giphy.gif',
-  }}
->
-  <ConnectedField
-    component={FileDrop}
-    hint="Files must be < 2MB"
-    isEditable
-    isClearable
-    label="Avatar"
-    name="avatar"
-    handleAddFile={console.debug}
-    handleRemoveFile={console.debug}
-  />
-</Form>
+function () {
+  const [value, setValue] = useState('https://media3.giphy.com/media/uYiJD8fcWDys8/giphy.gif?cid=790b76115d08fb457747437951ff7674&rid=giphy.gif')
+
+  const handleChange = (event) => {
+    setValue(event.target.value)
+  }
+
+  return (
+    <Field hint="Files must be < 2MB" label="Avatar">
+      <FileDrop
+        name="avatar"
+        handleAddFile={handleChange}
+        handleRemoveFile={handleChange}
+        isEditable
+        isClearable
+        value={value}
+      />
+    </Field>
+  )
+}
 ```
 
 ### Other files
 
 ```jsx
-<Form
-  initialValues={{
-    file: 'https://test-documents-file/file.docx?v=63731713698',
-  }}
->
-  <ConnectedField
-    component={FileDrop}
-    hint="Files must be < 2MB"
-    accept="application/*, audio/*, video/*, text/*"
-    isEditable
-    isClearable
-    label="File"
-    name="file"
-    handleAddFile={console.debug}
-    handleRemoveFile={console.debug}
-  />
-</Form>
+function () {
+  const [value, setValue] = useState('https://test-documents-file/file.docx?v=63731713698')
+
+  const handleChange = (event) => {
+    setValue(event.target.value)
+  }
+
+  return (
+    <Field hint="Files must be < 2MB" label="File">
+      <FileDrop
+        accept="application/*, audio/*, video/*, text/*"
+        isEditable
+        isClearable
+        name="file"
+        handleAddFile={handleChange}
+        handleRemoveFile={handleChange}
+        value={value}
+      />
+    </Field>
+  )
+}
 ```
 
 ## File without type
@@ -102,48 +116,44 @@ function() {
 Sometime in the url we don't have the type of the file, you can override with `forceFileType` set to `image`, `audio` or `video`.
 
 ```jsx
-<Form
-  initialValues={{
-    file1:
-      'https://cdn-images.welcomehome.io/zn9KvR98haoYRV6m1T-LR4c5h0HPZtVtvzwKPv02wgA/rs:auto:600::/q:100/czM6Ly93aC1wcml2YXRlLXByb2R1Y3Rpb24vcHJvZHVjdGlvbi91cGxvYWRzL3doL2Jsb2Nrcy9iZTI2MTc4OC1mYjc5LTRlZTQtYjQ4OC04ZDhiYTk4YTY3NDIvY292ZXIvdHdpdHRlckB4Mi5wbmc',
-    file2:
-      'https://cdn-images.welcomehome.io/zn9KvR98haoYRV6m1T-LR4c5h0HPZtVtvzwKPv02wgA/rs:auto:600::/q:100/czM6Ly93aC1wcml2YXRlLXByb2R1Y3Rpb24vcHJvZHVjdGlvbi91cGxvYWRzL3doL2Jsb2Nrcy9iZTI2MTc4OC1mYjc5LTRlZTQtYjQ4OC04ZDhiYTk4YTY3NDIvY292ZXIvdHdpdHRlckB4Mi5wbmc',
-  }}
->
-  <ConnectedField
-    component={FileDrop}
-    label="Image file"
-    name="file1"
-    handleAddFile={console.debug}
-    handleRemoveFile={console.debug}
-    forceFileType="image"
-  />
-  <ConnectedField
-    component={FileDrop}
-    mt="xl"
-    label="Music file"
-    name="file2"
-    handleAddFile={console.debug}
-    handleRemoveFile={console.debug}
-    forceFileType="audio"
-  />
-</Form>
-```
+function () {
+  const [value, setValue] = useState('https://cdn-images.welcomehome.io/zn9KvR98haoYRV6m1T-LR4c5h0HPZtVtvzwKPv02wgA/rs:auto:600::/q:100/czM6Ly93aC1wcml2YXRlLXByb2R1Y3Rpb24vcHJvZHVjdGlvbi91cGxvYWRzL3doL2Jsb2Nrcy9iZTI2MTc4OC1mYjc5LTRlZTQtYjQ4OC04ZDhiYTk4YTY3NDIvY292ZXIvdHdpdHRlckB4Mi5wbmc')
 
-## Disabled
+  const handleChange = (event) => {
+    setValue(event.target.value)
+  }
 
-```jsx
-<Form initialValues={{}}>
-  <ConnectedField name="avatar" component={FileDrop} disabled />
-</Form>
+  return (
+    <>
+      <Field label="Image file">
+        <FileDrop
+          name="file1"
+          handleAddFile={handleChange}
+          handleRemoveFile={handleChange}
+          value={value}
+          forceFileType="image"
+        />
+      </Field>
+      <Field mt="xl" label="Music file">
+        <FileDrop
+          name="file2"
+          handleAddFile={handleChange}
+          handleRemoveFile={handleChange}
+          value={value}
+          forceFileType="audio"
+        />
+      </Field>
+    </>
+  )
+}
 ```
 
-## Bare example
+## Disabled
 
 ```jsx
-<Form initialValues={{}}>
-  <ConnectedField name="avatar" component={FileDrop} />
-</Form>
+<Field disabled>
+  <FileDrop name="avatar" />
+</Field>
 ```
 
 ## Properties
diff --git a/docs/pages/components/file-upload.mdx b/docs/pages/components/file-upload.mdx
index 6f9502dbdd..d8cb524e40 100644
--- a/docs/pages/components/file-upload.mdx
+++ b/docs/pages/components/file-upload.mdx
@@ -25,42 +25,52 @@ See your browser console for the real `File` object ready to upload.
 See more about [media type](https://www.iana.org/assignments/media-types/media-types.xhtml).
 
 ```jsx
-<Form initialValues={{}}>
-  <ConnectedField
-    component={FileUpload}
-    accept="image/*"
-    name="avatar"
-    label="Avatar"
-    hint="Files must be <200MB"
-    required
-    handleAddFile={console.debug}
-    handleRemoveFile={console.debug}
-    onError={console.error}
-  >
-    {({ openFile }) => <Button onClick={openFile}>Upload avatar</Button>}
-  </ConnectedField>
-</Form>
+function () {
+  const [value, setValue] = useState(null)
+
+  const handleChange = file => {
+    setValue(file)
+  }
+
+  return (
+    <Field label="Avatar" hint="Files must be <200MB" required>
+      <FileUpload
+        accept="image/*"
+        handleAddFile={handleChange}
+        handleRemoveFile={handleChange}
+        name="avatar"
+        onError={console.error}
+        value={value}
+      >
+        {({ openFile }) => <Button onClick={openFile}>Upload avatar</Button>}
+      </FileUpload>
+    </Field>
+  )
+}
 ```
 
 ## Show preview if value exists
 
 ```jsx
-<Form
-  initialValues={{
-    file: 'https://doc-example/example.docx?v=63731713698',
-  }}
->
-  <ConnectedField
-    component={FileUpload}
-    accept="image/*"
-    name="file"
-    label="File"
-    hint="Files must be <200MB"
-    required
-    handleAddFile={console.debug}
-    handleRemoveFile={console.debug}
-  />
-</Form>
+function () {
+  const [value, setValue] = useState('https://doc-example/example.docx?v=63731713698')
+
+  const handleChange = file => {
+    setValue(file)
+  }
+
+  return (
+    <Field label="File" hint="Files must be <200MB" required>
+      <FileUpload
+        accept="image/*"
+        handleAddFile={handleChange}
+        handleRemoveFile={handleChange}
+        name="file"
+        value={value}
+      />
+    </Field>
+  )
+}
 ```
 
 ## Multiple
@@ -68,39 +78,45 @@ See more about [media type](https://www.iana.org/assignments/media-types/media-t
 Add `multiple` property.
 
 ```jsx
-<Form initialValues={{}}>
-  <ConnectedField
-    component={FileUpload}
-    accept="application/pdf"
-    name="files"
-    label="Files"
-    hint="Files must be <200MB"
-    multiple
-    handleAddFile={console.debug}
-    handleRemoveFile={console.debug}
-    required
-  >
-    {({ openFile, disabled }) => (
-      <Button onClick={openFile} variant="secondary" disabled={disabled}>
-        Choose file(s)
-      </Button>
-    )}
-  </ConnectedField>
-</Form>
+function () {
+  const [value, setValue] = useState(null)
+
+  const handleChange = file => {
+    setValue(file)
+  }
+
+  return (
+    <Field label="Files" hint="Files must be <200MB" required>
+      <FileUpload
+        accept="application/pdf"
+        name="files"
+        multiple
+        handleAddFile={handleChange}
+        handleRemoveFile={handleChange}
+      >
+        {({ openFile, disabled }) => (
+          <Button onClick={openFile} variant="secondary" disabled={disabled}>
+            Choose file(s)
+          </Button>
+        )}
+      </FileUpload>
+    </Field>
+  )
+}
 ```
 
 ## Disabled
 
 ```jsx
-<Form initialValues={{}}>
-  <ConnectedField component={FileUpload} disabled name="disabled">
+<Field disabled>
+  <FileUpload name="disabled">
     {({ openFile, disabled }) => (
       <Button onClick={openFile} disabled={disabled}>
         Choose file
       </Button>
     )}
-  </ConnectedField>
-</Form>
+  </FileUpload>
+</Field>
 ```
 
 ## Customize
@@ -110,15 +126,25 @@ Add `multiple` property.
 You can change the upload button component.
 
 ```jsx
-<Form initialValues={{}}>
-  <ConnectedField component={FileUpload} name="custom">
-    {({ openFile, disabled }) => (
-      <Button size="xl" shape="circle" onClick={openFile} disabled={disabled}>
-        <UploadIcon size="xl" />
-      </Button>
-    )}
-  </ConnectedField>
-</Form>
+function () {
+  const [value, setValue] = useState(null)
+
+  const handleChange = file => {
+    setValue(file)
+  }
+
+  return (
+    <Field>
+      <FileUpload name="custom" handleAddFile={handleChange} handleRemoveFile={handleChange} value={value}>
+        {({ openFile, disabled }) => (
+          <Button size="xl" shape="circle" onClick={openFile} disabled={disabled}>
+            <UploadIcon size="xl" />
+          </Button>
+        )}
+      </FileUpload>
+    </Field>
+  )
+}
 ```
 
 ### Change Preview
@@ -127,6 +153,12 @@ You can change the preview component.
 
 ```jsx
 function() {
+  const [value, setValue] = useState('https://doc-example/example.docx?v=63731713698')
+
+  const handleChange = file => {
+    setValue(file)
+  }
+
   const Preview = ({ file, onRemove }) => {
     const Icon = getFileIcon(file)
     const name = getFileName(file)
@@ -154,20 +186,15 @@ function() {
   }
 
   return (
-    <Form initialValues={{ file: 'https://doc-example/example.docx?v=63731713698' }}>
-      <ConnectedField
-          component={FileUpload}
-          name="file"
-          label="File"
-          preview={Preview}
-        >
+    <Field label="File">
+      <FileUpload name="file" preview={Preview} handleAddFile={handleChange} handleRemoveFile={handleChange} value={value}>
         {({ openFile, disabled }) => (
           <Button onClick={openFile} disabled={disabled}>
             Custom preview
           </Button>
         )}
-      </ConnectedField>
-    </Form>
+      </FileUpload>
+    </Field>
   )
 }
 ```
@@ -175,23 +202,33 @@ function() {
 You can also set the `preview` prop to `null` and handle your own preview in place of the upload button with `files` & `onRemoveFile` render props:
 
 ```jsx
-<Form initialValues={{}}>
-  <ConnectedField component={FileUpload} name="file" label="File" multiple preview={null}>
-    {({ openFile, files, onRemoveFile }) =>
-      files.length === 0 ? (
-        <Button onClick={openFile}>Upload files</Button>
-      ) : (
-        <Stack direction="row">
-          {files.map(file => (
-            <Button key={file.preview} onClick={() => onRemoveFile(file)}>
-              {getFileIcon(file)} Click to remove {file.name}
-            </Button>
-          ))}
-        </Stack>
-      )
-    }
-  </ConnectedField>
-</Form>
+function () {
+  const [value, setValue] = useState(null)
+
+  const handleChange = file => {
+    setValue(file)
+  }
+
+  return (
+    <Field label="File">
+      <FileUpload name="file" multiple preview={null} handleAddFile={handleChange} handleRemoveFile={handleChange} value={value}>
+        {({ openFile, files, onRemoveFile }) =>
+          files.length === 0 ? (
+            <Button onClick={openFile}>Upload files</Button>
+          ) : (
+            <Stack direction="row">
+              {files.map(file => (
+                <Button key={file.preview} onClick={() => onRemoveFile(file)}>
+                  {getFileIcon(file)} Click to remove {file.name}
+                </Button>
+              ))}
+            </Stack>
+          )
+        }
+      </FileUpload>
+    </Field>
+  )
+}
 ```
 
 ## Properties
diff --git a/docs/pages/components/hook-form.mdx b/docs/pages/components/hook-form.mdx
index 55362b7bb6..82bc265868 100644
--- a/docs/pages/components/hook-form.mdx
+++ b/docs/pages/components/hook-form.mdx
@@ -10,38 +10,45 @@ function() {
     return (
       <>
         <Field
-          component={InputText}
           error={errors && errors.input_text && errors.input_text.message}
           label="Input Text"
-          name="input_text"
           maxWidth={300}
-          ref={register}
-        />
+        >
+          <InputText
+            name="input_text"
+            ref={register}
+          />
+        </Field>
         <Field
-          component={InputText}
           error={errors && errors.email && errors.email.message}
           label="Email"
           mt="lg"
-          name="email"
           maxWidth={300}
-          ref={register}
-        />
+        >
+          <InputText
+            name="email"
+            ref={register}
+          />
+        </Field>
         <Controller
           name="submit_checkbox"
           render={({ name, onBlur, onChange, value }) => {
             return (
               <Field
-                checked={value}
-                component={Checkbox}
                 error={errors && errors[name] && errors[name].message}
                 label="You need to check this checkbox to submit"
-                name={name}
                 mt="xl"
-                onBlur={onBlur}
-                onChange={e => onChange(e && e.target && e.target.checked)}
                 required
-                value={value}
-              />
+              >
+                <Checkbox
+                  checked={value}
+                  name={name}
+                  onBlur={onBlur}
+                  onChange={e => onChange(e && e.target && e.target.checked)}
+                  ref={register}
+                  value={value}
+                />
+              </Field>
             )
           }}
         />
diff --git a/docs/pages/components/input-text.mdx b/docs/pages/components/input-text.mdx
index c350e66335..dd051ddd70 100644
--- a/docs/pages/components/input-text.mdx
+++ b/docs/pages/components/input-text.mdx
@@ -19,15 +19,33 @@ import {
 ## Default
 
 ```jsx
-<Form initialValues={{}}>
-  <ConnectedField
-    name="firstName"
-    component={InputText}
-    placeholder="Boaty"
-    label="First name"
-    required
-  />
-</Form>
+function () {
+  const [value, setValue] = React.useState('')
+
+  const handleChange = (event) => {
+    setValue(event.target.value)
+  }
+
+  return <InputText name="firstName" placeholder="Boaty" value={value} onChange={handleChange} />
+}
+```
+
+## With Field
+
+```jsx
+function () {
+  const [value, setValue] = React.useState('')
+
+  const handleChange = (event) => {
+    setValue(event.target.value)
+  }
+
+  return (
+    <Field label="First name" required>
+      <InputText placeholder="Boaty" value={value} onChange={handleChange} />
+    </Field>
+  )
+}
 ```
 
 ## Clearable
@@ -35,15 +53,15 @@ import {
 Use the `isClearable` prop to add a cross button to remove the content (value) of the `TextInput`
 
 ```jsx
-<Form initialValues={{ firstName2: 'Trevor' }}>
-  <ConnectedField
-    component={InputText}
-    isClearable
-    label="First name"
-    name="firstName2"
-    placeholder="Boaty"
-  />
-</Form>
+function () {
+  const [value, setValue] = React.useState('')
+
+  const handleChange = (event) => {
+    setValue(event.target.value)
+  }
+
+  return <InputText name="firstName2" placeholder="Boaty" value={value} onChange={handleChange} isClearable />
+}
 ```
 
 ## Icon
@@ -51,74 +69,43 @@ Use the `isClearable` prop to add a cross button to remove the content (value) o
 Pass an `icon` through to decorate your `InputText`
 
 ```jsx
-<Form initialValues={{}}>
-  <ConnectedField
-    component={InputText}
-    icon={<AvatarIcon color="light.100" />}
-    label="First name"
-    name="firstName3"
-    placeholder="Boaty"
-  />
-</Form>
+function () {
+  const [value, setValue] = React.useState('')
+
+  const handleChange = (event) => {
+    setValue(event.target.value)
+  }
+
+  return <InputText icon={<AvatarIcon color="light.100" />} name="firstName3" placeholder="Boaty" value={value} onChange={handleChange} />
+}
 ```
 
 ## Sizes
 
 ```jsx
-<Form initialValues={{}}>
-  <Stack spacing="xl">
-    <ConnectedField
-      component={InputText}
-      label="I'm a small sized field"
-      name="small"
-      placeholder="Placeholder"
-      size="sm"
-    />
-    <ConnectedField
-      component={InputText}
-      label="I'm a medium sized field"
-      name="medium"
-      placeholder="Placeholder"
-      size="md"
-    />
-    <ConnectedField
-      component={InputText}
-      label="I'm a large sized field which is my default size"
-      name="large"
-      placeholder="Placeholder"
-    />
-  </Stack>
-</Form>
+<Stack spacing="xl">
+  <InputText name="small" placeholder="Placeholder" size="sm" />
+  <InputText name="medium" placeholder="Placeholder" size="md" />
+  <InputText name="large" placeholder="Placeholder" />
+</Stack>
 ```
 
 ## Inline
 
 ```jsx
-<Form initialValues={{ firstName4: 'Trevor' }}>
-  <ConnectedField
-    component={InputText}
-    flexDirection="row"
-    label="First name"
-    name="firstName4"
-    placeholder="Boaty"
-    required
-  />
-</Form>
+<Field flexDirection="row" label="First name" required>
+  <InputText name="firstName4" placeholder="Boaty" />
+</Field>
 ```
 
 ## Disabled
 
 ```jsx
-<Form initialValues={{ firstName5: 'Trevor' }}>
-  <ConnectedField
-    component={InputText}
-    disabled
-    label="First name"
-    name="firstName5"
-    placeholder="Boaty"
-    required
-  />
-</Form>
+<InputText disabled name="firstName5" placeholder="Boaty" />
+
+<Field disabled label="First name" required>
+  <InputText name="firstName6" placeholder="Boaty" />
+</Field>
 ```
 
 ## Properties
diff --git a/docs/pages/components/label.mdx b/docs/pages/components/label.mdx
index f7cab9b8ac..9f18dfaabc 100644
--- a/docs/pages/components/label.mdx
+++ b/docs/pages/components/label.mdx
@@ -49,14 +49,22 @@ With `required` property.
 Checkboxes and radio buttons are normally nested inside labels. If you do this, make sure there is only one other child (in this example, a `div`).
 
 ```jsx
-<Label variant="error">
-  <Checkbox name="labelExample" onChange={() => {}} />
-  <div>
-    <span>Error variant with </span>
-    <Link href="#">a link</Link>
-    <span> and all of that jazz because of the fox</span>
-  </div>
-</Label>
+function () {
+  const [checked, setChecked] = useState(false)
+
+  const handleToggle = () => setChecked(!checked)
+
+  return (
+    <Label variant="error">
+      <Checkbox name="labelExample" checked={checked} onChange={handleToggle} />
+      <div>
+        <span>Error variant with </span>
+        <Link href="#">a link</Link>
+        <span> and all of that jazz because of the fox</span>
+      </div>
+    </Label>
+  )
+}
 ```
 
 ## Disabled
diff --git a/docs/pages/components/markdown-editor.mdx b/docs/pages/components/markdown-editor.mdx
index 9c4fad23ed..59c906950b 100644
--- a/docs/pages/components/markdown-editor.mdx
+++ b/docs/pages/components/markdown-editor.mdx
@@ -26,19 +26,19 @@ We use [react-simplemde-editor](https://github.com/RIP21/react-simplemde-editor)
 ## Usage
 
 ````jsx
-<Form
-  initialValues={{
-    welcome:
-      "# Hi!\n## Look at me!\n\nWe've got some **bold** and *italic* text, a cheeky bit of ~~strikethrough~~, some `inline code` and a [link](https://welcometothejungle.com). We can also do inline images by hand ![Milou](https://fr.tintin.com/images/tintin/persos/images/milou.png 'Milou') as well as:\n\n* Unordered lists\n* Unordered lists\n\n1. Ordered lists\n1. Ordered lists\n\nAnd of course the classics:\n\n```\nA code block\nwith multiple lines\n```\n\n> And a quote",
-  }}
->
-  <ConnectedField
-    component={MarkdownEditor}
-    label="Markdown Editor"
-    name="welcome"
-    placeholder="Placeholder"
-  />
-</Form>
+function () {
+  const [value, setValue] = useState("# Hi!\n## Look at me!\n\nWe've got some **bold** and *italic* text, a cheeky bit of ~~strikethrough~~, some `inline code` and a [link](https://welcometothejungle.com). We can also do inline images by hand ![Milou](https://fr.tintin.com/images/tintin/persos/images/milou.png 'Milou') as well as:\n\n* Unordered lists\n* Unordered lists\n\n1. Ordered lists\n1. Ordered lists\n\nAnd of course the classics:\n\n```\nA code block\nwith multiple lines\n```\n\n> And a quote")
+
+  const handleChange = event => {
+    setValue(event.target.value)
+  }
+
+  return (
+    <Field label="Markdown Editor">
+      <MarkdownEditor name="welcome" placeholder="Placeholder" value={value} onChange={handleChange} />
+    </Field>
+  )
+}
 ````
 
 ## Toolbar
@@ -57,26 +57,36 @@ For example, in the toolbar below we're using icons from:
 Note: to use FontAwesome or Material Design icons (or any other 3rd-party icon font), you'll have to include the font stylesheet somewhere in your app.
 
 ```jsx
-<Form initialValues={{}}>
-  <ConnectedField
-    component={MarkdownEditor}
-    label="Markdown Editor"
-    name="welcome"
-    placeholder="Placeholder"
-    toolbar={[
-      { name: 'bold', icon: <i className="fa fa-bold" />, title: 'Bold 🌴' },
-      { name: 'italic', icon: <i className="fa fa-italic" /> },
-      { name: 'divider' },
-      { name: 'strikethrough', icon: <i className="zmdi zmdi-format-strikethrough-s" /> },
-      { name: 'link', icon: <i className="zmdi zmdi-link" /> },
-      { name: 'divider' },
-      { name: 'code' },
-      { name: 'quote', title: 'Quote 🌴' },
-      { name: 'divider' },
-      { name: 'emoji', icon: '👌' },
-    ]}
-  />
-</Form>
+function () {
+  const [value, setValue] = useState('')
+
+  const handleChange = event => {
+    setValue(event.target.value)
+  }
+
+  return (
+    <Field label="Markdown Editor">
+      <MarkdownEditor
+        name="welcome"
+        placeholder="Placeholder"
+        onChange={handleChange}
+        value={value}
+        toolbar={[
+          { name: 'bold', icon: <i className="fa fa-bold" />, title: 'Bold 🌴' },
+          { name: 'italic', icon: <i className="fa fa-italic" /> },
+          { name: 'divider' },
+          { name: 'strikethrough', icon: <i className="zmdi zmdi-format-strikethrough-s" /> },
+          { name: 'link', icon: <i className="zmdi zmdi-link" /> },
+          { name: 'divider' },
+          { name: 'code' },
+          { name: 'quote', title: 'Quote 🌴' },
+          { name: 'divider' },
+          { name: 'emoji', icon: '👌' },
+        ]}
+      />
+    </Field>
+  )
+}
 ```
 
 The default toolbar uses [Welcome UI icons](/components/icon) with the following items:
@@ -106,27 +116,37 @@ The default toolbar uses [Welcome UI icons](/components/icon) with the following
 You can add some actions on the bottom of the textarea with `actions` childrens. We calculate automatically the height of actions.
 
 ```jsx
-<Form initialValues={{}}>
-  <ConnectedField
-    component={MarkdownEditor}
-    label="Markdown Editor"
-    name="welcome-actions"
-    placeholder="Placeholder"
-    actions={
-      <>
-        <Button variant="quaternary" shape="square" size="sm">
-          <HashtagIcon />
-        </Button>
-        <Button variant="quaternary" shape="square" size="sm">
-          <MentionIcon />
-        </Button>
-        <Button variant="quaternary" shape="square" size="sm">
-          <AttachmentIcon />
-        </Button>
-      </>
-    }
-  />
-</Form>
+function () {
+  const [value, setValue] = useState('')
+
+  const handleChange = event => {
+    setValue(event.target.value)
+  }
+
+  return (
+    <Field label="Markdown Editor">
+      <MarkdownEditor
+        actions={
+          <>
+            <Button variant="quaternary" shape="square" size="sm">
+              <HashtagIcon />
+            </Button>
+            <Button variant="quaternary" shape="square" size="sm">
+              <MentionIcon />
+            </Button>
+            <Button variant="quaternary" shape="square" size="sm">
+              <AttachmentIcon />
+            </Button>
+          </>
+        }
+        name="welcome-actions"
+        placeholder="Placeholder"
+        onChange={handleChange}
+        value={value}
+      />
+    </Field>
+  )
+}
 ```
 
 ## Properties
diff --git a/docs/pages/components/password-input.mdx b/docs/pages/components/password-input.mdx
index 94afcbcb7f..f4315966d6 100644
--- a/docs/pages/components/password-input.mdx
+++ b/docs/pages/components/password-input.mdx
@@ -21,9 +21,33 @@ InputText component to create a password input with a show and hide password fun
 ## Default
 
 ```jsx
-<Form initialValues={{ password: 'qwerty' }}>
-  <ConnectedField name="password" component={PasswordInput} label="Password" required />
-</Form>
+function () {
+  const [value, setValue] = useState('')
+
+  const handleChange = (event) => {
+    setValue(event.target.value)
+  }
+
+  return <PasswordInput name="password" onChange={handleChange} value={value} />
+}
+```
+
+## With Field
+
+```jsx
+function () {
+  const [value, setValue] = useState('')
+
+  const handleChange = (event) => {
+    setValue(event.target.value)
+  }
+
+  return (
+    <Field label="Password" required>
+      <PasswordInput name="password2" onChange={handleChange} value={value} />
+    </Field>
+  )
+}
 ```
 
 ## Properties
diff --git a/docs/pages/components/picker.mdx b/docs/pages/components/picker.mdx
index d1dfe717ea..b36dab330f 100644
--- a/docs/pages/components/picker.mdx
+++ b/docs/pages/components/picker.mdx
@@ -19,79 +19,97 @@ import {
 ## With icons
 
 ```jsx
-<Form initialValues={{}}>
-  <ConnectedField
-    component={Picker}
-    options={[
-      {
-        element: ({ selected }) => (
-          <Shape shape="circle" w={30} backgroundColor={selected ? 'nude.200' : 'unset'}>
-            <EditIcon color="dark.900" />
-          </Shape>
-        ),
-        value: 'edit',
-      },
-      {
-        element: ({ selected }) => (
-          <Shape shape="circle" w={30} backgroundColor={selected ? 'nude.200' : 'unset'}>
-            <TwitterIcon color="dark.900" />
-          </Shape>
-        ),
-        value: 'twitter',
-      },
-      {
-        element: ({ selected }) => (
-          <Shape shape="circle" w={30} backgroundColor={selected ? 'nude.200' : 'unset'}>
-            <PencilIcon color="dark.900" />
-          </Shape>
-        ),
-        value: 'pencil',
-      },
-    ]}
-    name="icon"
-    label="Icons"
-    required
-  />
-</Form>
+function () {
+  const [value, setValue] = useState(null)
+
+  const handleChange = event => {
+    setValue(event.target.value)
+  }
+
+  return (
+    <Field label="Icons" required>
+      <Picker
+        name="icon"
+        options={[
+          {
+            element: ({ selected }) => (
+              <Shape shape="circle" w={30} backgroundColor={selected ? 'nude.200' : 'unset'}>
+                <EditIcon color="dark.900" />
+              </Shape>
+            ),
+            value: 'edit',
+          },
+          {
+            element: ({ selected }) => (
+              <Shape shape="circle" w={30} backgroundColor={selected ? 'nude.200' : 'unset'}>
+                <TwitterIcon color="dark.900" />
+              </Shape>
+            ),
+            value: 'twitter',
+          },
+          {
+            element: ({ selected }) => (
+              <Shape shape="circle" w={30} backgroundColor={selected ? 'nude.200' : 'unset'}>
+                <PencilIcon color="dark.900" />
+              </Shape>
+            ),
+            value: 'pencil',
+          },
+        ]}
+        onChange={handleChange}
+        value={value}
+      />
+    </Field>
+  )
+}
 ```
 
 ## With colors and a default value
 
 ```jsx
-<Form initialValues={{ color: '3' }}>
-  <ConnectedField
-    component={Picker}
-    options={[
-      {
-        element: ({ selected }) => (
-          <Shape shape="circle" w={30} backgroundColor={selected ? 'nude.200' : 'unset'}>
-            <Shape borderRadius={2} h={15} w={15} backgroundColor="danger.200" />
-          </Shape>
-        ),
-        value: '1',
-      },
-      {
-        element: ({ selected }) => (
-          <Shape shape="circle" w={30} backgroundColor={selected ? 'nude.200' : 'unset'}>
-            <Shape borderRadius={2} h={15} w={15} backgroundColor="success.500" />
-          </Shape>
-        ),
-        value: '2',
-      },
-      {
-        element: ({ selected }) => (
-          <Shape shape="circle" w={30} backgroundColor={selected ? 'nude.200' : 'unset'}>
-            <Shape borderRadius={2} h={15} w={15} backgroundColor="warning.200" />
-          </Shape>
-        ),
-        value: '3',
-      },
-    ]}
-    name="color"
-    label="Colors"
-    required
-  />
-</Form>
+function () {
+  const [value, setValue] = useState('3')
+
+  const handleChange = event => {
+    setValue(event.target.value)
+  }
+
+  return (
+    <Field label="Colors" required>
+      <Picker
+        name="color"
+        options={[
+          {
+            element: ({ selected }) => (
+              <Shape shape="circle" w={30} backgroundColor={selected ? 'nude.200' : 'unset'}>
+                <Shape borderRadius={2} h={15} w={15} backgroundColor="danger.200" />
+              </Shape>
+            ),
+            value: '1',
+          },
+          {
+            element: ({ selected }) => (
+              <Shape shape="circle" w={30} backgroundColor={selected ? 'nude.200' : 'unset'}>
+                <Shape borderRadius={2} h={15} w={15} backgroundColor="success.500" />
+              </Shape>
+            ),
+            value: '2',
+          },
+          {
+            element: ({ selected }) => (
+              <Shape shape="circle" w={30} backgroundColor={selected ? 'nude.200' : 'unset'}>
+                <Shape borderRadius={2} h={15} w={15} backgroundColor="warning.200" />
+              </Shape>
+            ),
+            value: '3',
+          },
+        ]}
+        onChange={handleChange}
+        value={value}
+      />
+    </Field>
+  )
+}
 ```
 
 ## Properties
diff --git a/docs/pages/components/radio-group.mdx b/docs/pages/components/radio-group.mdx
index 995eb7e214..116af403cc 100644
--- a/docs/pages/components/radio-group.mdx
+++ b/docs/pages/components/radio-group.mdx
@@ -19,53 +19,59 @@ import {
 ## Usage
 
 ```jsx
-<Form
-  initialValues={{}}
-  validate={values => (!values.social ? { social: 'You must choose a social network' } : {})}
->
-  <ConnectedField
-    component={RadioGroup}
-    flexDirection="row"
-    hint="Most popular is Twitter"
-    label="Social networks"
-    mb="xl"
-    name="social"
-    options={constants.ITEMS}
-    required
-  />
-  <Button type="submit">Submit</Button>
-</Form>
+function () {
+  const [value, setValue] = useState(null)
+
+  const handleChange = event => {
+    setValue(event.target.value)
+  }
+
+  return (
+    <Field
+      hint="Most popular is Twitter"
+      label="Social networks"
+      mb="xl"
+      required
+    >
+      <RadioGroup name="social" options={constants.ITEMS} onChange={handleChange} value={value} />
+    </Field>
+  )
+}
 ```
 
 ## With hint on radio
 
 ```jsx
-<Form
-  initialValues={{}}
-  validate={values => (!values.social ? { social: 'You must choose a social network' } : {})}
->
-  <ConnectedField
-    component={RadioGroup}
-    flexDirection="row"
-    mb="xl"
-    name="social"
-    maxWidth={{ md: 0.3 }}
-    options={[
-      {
-        value: 'behance',
-        label: 'Behance',
-        hint: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-      },
-      {
-        value: 'dribbble',
-        label: 'Dribbble',
-        hint: 'Aenean a tristique turpis, in elementum est.',
-      },
-    ]}
-    required
-  />
-  <Button type="submit">Submit</Button>
-</Form>
+function () {
+  const [value, setValue] = useState(null)
+
+  const handleChange = event => {
+    setValue(event.target.value)
+  }
+
+  return (
+    <Field flexDirection="row" mb="xl" required>
+      <RadioGroup
+        name="social"
+        maxWidth={{ md: 0.3 }}
+        options={[
+          {
+            value: 'behance',
+            label: 'Behance',
+            hint: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+          },
+          {
+            value: 'dribbble',
+            label: 'Dribbble',
+            hint: 'Aenean a tristique turpis, in elementum est.',
+          },
+        ]}
+        onChange={handleChange}
+        value={value}
+      />
+    </Field>
+  )
+}
 ```
 
 ## Properties
diff --git a/docs/pages/components/radio-tab.mdx b/docs/pages/components/radio-tab.mdx
index e7a1947546..8ab423746f 100644
--- a/docs/pages/components/radio-tab.mdx
+++ b/docs/pages/components/radio-tab.mdx
@@ -19,28 +19,35 @@ import {
 ## Usage
 
 ```jsx
-<Form initialValues={{ social_1: 'twitter', social_2: 'xing' }}>
-  <ConnectedField
-    component={RadioGroup}
-    flexDirection="row"
-    label="Social networks"
-    mb="xl"
-    name="social_1"
-    options={constants.ITEMS}
-    renderOption={RadioTab}
-    required
-  />
-  <ConnectedField
-    component={RadioGroup}
-    label="Social networks"
-    mb="xl"
-    name="social_2"
-    options={constants.ITEMS}
-    renderOption={RadioTab}
-    required
-    w={1 / 3}
-  />
-</Form>
+function () {
+  const  [value, setValue] = useState('twitter')
+
+  const handleChange = event => {
+    setValue(event.target.value)
+  }
+
+  return (
+    <Field label="Social networks" mb="xl" required>
+      <RadioGroup name="social_1" options={constants.ITEMS} renderOption={RadioTab} value={value} onChange={handleChange} />
+    </Field>
+  )
+}
+```
+
+```jsx
+function () {
+  const  [value, setValue] = useState('twitter')
+
+  const handleChange = event => {
+    setValue(event.target.value)
+  }
+
+  return (
+    <Field label="Social networks" mb="xl" required w={1 / 3}>
+      <RadioGroup name="social_1" options={constants.ITEMS} flexDirection="column" renderOption={RadioTab} value={value} onChange={handleChange} />
+    </Field>
+  )
+}
 ```
 
 ## Properties
diff --git a/docs/pages/components/search.mdx b/docs/pages/components/search.mdx
index e094d0d6f4..83f753ff6e 100644
--- a/docs/pages/components/search.mdx
+++ b/docs/pages/components/search.mdx
@@ -21,30 +21,38 @@ This allows you to search data from a remote API. It is based on the [downshift]
 ## Default
 
 ```jsx
-<Form initialValues={{}}>
-  <ConnectedField
-    component={Search}
-    search={async function asyncSearch(s) {
-      const response = await fetch(`https://www.omdbapi.com?apikey=41514363&s=${s}`)
-      const data = await response.json()
-      return data.Search
-    }}
-    label="Movies"
-    name="movies"
-    renderItem={item =>
-      item && (
-        <div style={{ display: 'flex', alignItems: 'center' }}>
-          <Shape w="40px" h="40px" shape="circle" mr="sm">
-            <img src={item.Poster} />
-          </Shape>
-          {item.Title} ({item.Year})
-        </div>
-      )
-    }
-    placeholder="Search a movie"
-    itemToString={item => item && item.Title}
-  />
-</Form>
+function () {
+  const [value, setValue] = useState('')
+
+  const handleChange = (newValue) => {
+    setValue(newValue)
+  }
+
+  return (
+    <Search
+      name="movies"
+      renderItem={item =>
+        item && (
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <Shape w="40px" h="40px" shape="circle" mr="sm">
+              <img src={item.Poster} />
+            </Shape>
+            {item.Title} ({item.Year})
+          </div>
+        )
+      }
+      placeholder="Search a movie"
+      itemToString={item => item && item.Title}
+      onChange={handleChange}
+      value={value}
+      search={async function asyncSearch(s) {
+        const response = await fetch(`https://www.omdbapi.com?apikey=41514363&s=${s}`)
+        const data = await response.json()
+        return data.Search
+      }}
+    />
+  )
+}
 ```
 
 ## With option groups
@@ -52,57 +60,67 @@ This allows you to search data from a remote API. It is based on the [downshift]
 To use option groups, you must provide two additional props: `groupsEnabled` that allow nested options and `renderGroupHeader` that renders the header of a specific group
 
 ```jsx
-<Form initialValues={{}}>
-  <ConnectedField
-    component={Search}
-    search={async function asyncSearch(s) {
-      const response = await fetch(`https://www.omdbapi.com?apikey=41514363&s=${s}`)
-      const data = await response.json()
-      const searchResults = (data.Search || []).reduce(
-        (acc, item) => {
-          if (item.Type === 'movie') {
-            acc.movies.push(item)
-          } else {
-            acc.series.push(item)
-          }
-          return acc
-        },
-        { movies: [], series: [] }
-      )
-
-      return [
-        { label: 'Movies', options: searchResults.movies },
-        { label: 'Series', options: searchResults.series },
-      ]
-    }}
-    label="Movies & Series"
-    name="movies_series"
-    renderItem={item =>
-      item && (
-        <div style={{ display: 'flex', alignItems: 'center' }}>
-          <Shape w="40px" h="40px" shape="circle" mr="sm">
-            <img src={item.Poster} />
-          </Shape>
-          {item.Title} ({item.Year})
-        </div>
-      )
-    }
-    placeholder="Search a movie or series"
-    itemToString={item => item && item.Title}
-    groupsEnabled
-    renderGroupHeader={({ label, options }) => (
-      <Box p="xxs">
-        <Box display="flex" justifyContent="space-between" alignItems="center">
-          <Text variant="body3" m="0">
-            {label}
-          </Text>
-          <Tag>{options.length}</Tag>
-        </Box>
-        {options.length === 0 && <Text variant="body4">No results found</Text>}
-      </Box>
-    )}
-  />
-</Form>
+function () {
+  const [value, setValue] = useState('')
+
+  const handleChange = (newValue) => {
+    setValue(newValue)
+  }
+
+  return (
+    <Field label="Movies & Series">
+      <Search
+        name="movies_series"
+        renderItem={item =>
+          item && (
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              <Shape w="40px" h="40px" shape="circle" mr="sm">
+                <img src={item.Poster} />
+              </Shape>
+              {item.Title} ({item.Year})
+            </div>
+          )
+        }
+        placeholder="Search a movie or series"
+        itemToString={item => item && item.Title}
+        groupsEnabled
+        renderGroupHeader={({ label, options }) => (
+          <Box p="xxs">
+            <Box display="flex" justifyContent="space-between" alignItems="center">
+              <Text variant="body3" m="0">
+                {label}
+              </Text>
+              <Tag>{options.length}</Tag>
+            </Box>
+            {options.length === 0 && <Text variant="body4">No results found</Text>}
+          </Box>
+        )}
+        onChange={handleChange}
+        value={value}
+        search={async function asyncSearch(s) {
+          const response = await fetch(`https://www.omdbapi.com?apikey=41514363&s=${s}`)
+          const data = await response.json()
+          const searchResults = (data.Search || []).reduce(
+            (acc, item) => {
+              if (item.Type === 'movie') {
+                acc.movies.push(item)
+              } else {
+                acc.series.push(item)
+              }
+              return acc
+            },
+            { movies: [], series: [] }
+          )
+
+          return [
+            { label: 'Movies', options: searchResults.movies },
+            { label: 'Series', options: searchResults.series },
+          ]
+        }}
+      />
+    </Field>
+  )
+}
 ```
 
 ## Properties
diff --git a/docs/pages/components/select.mdx b/docs/pages/components/select.mdx
index db15056662..34cdcf54b7 100644
--- a/docs/pages/components/select.mdx
+++ b/docs/pages/components/select.mdx
@@ -21,28 +21,51 @@ It is based on the [downshift](https://github.com/downshift-js/downshift) librar
 ## Default
 
 ```jsx
-<Form initialValues={{}}>
-  <ConnectedField
-    component={Select}
-    options={constants.ITEMS}
-    name="welcome"
-    label="Social networks"
-  />
-</Form>
+function () {
+  const [value, setValue] = useState(null)
+
+  const handleChange = (newValue) => {
+    setValue(newValue)
+  }
+
+  return <Select options={constants.ITEMS} name="welcome" value={value} onChange={handleChange} />
+}
+```
+
+## With Field
+
+```jsx
+function () {
+  const [value, setValue] = useState(null)
+
+  const handleChange = (newValue) => {
+    setValue(newValue)
+  }
+
+  return (
+    <Field label="Social networks" required>
+      <Select options={constants.ITEMS} name="welcome2" value={value} onChange={handleChange} />
+    </Field>
+  )
+}
 ```
 
 ## Clearable
 
 ```jsx
-<Form initialValues={{ welcome2: ['github', 'twitter'] }}>
-  <ConnectedField
-    component={Select}
-    isClearable
-    options={constants.ITEMS}
-    name="welcome2"
-    label="Social networks"
-  />
-</Form>
+function () {
+  const [value, setValue] = useState('github')
+
+  const handleChange = (newValue) => {
+    setValue(newValue)
+  }
+
+  return (
+    <Field label="Social networks">
+      <Select isClearable options={constants.ITEMS} name="welcome3" value={value} onChange={handleChange} />
+    </Field>
+  )
+}
 ```
 
 ## Multiple values
@@ -50,49 +73,63 @@ It is based on the [downshift](https://github.com/downshift-js/downshift) librar
 Just add the `isMultiple` prop. Note: to be able to choose multiple values you must pass an array for the `value`.
 
 ```jsx
-<Form initialValues={{ welcome3: ['github', 'twitter'] }}>
-  <ConnectedField
-    component={Select}
-    isMultiple
-    options={constants.ITEMS}
-    name="welcome3"
-    label="Social networks"
-  />
-</Form>
+function () {
+  const [value, setValue] = useState(['github', 'twitter'])
+
+  const handleChange = (newValue) => {
+    setValue(newValue)
+  }
+
+  return (
+    <Field label="Social networks">
+      <Select isMultiple options={constants.ITEMS} name="welcome3" value={value} onChange={handleChange} />
+    </Field>
+  )
+}
 ```
 
 Passing a `renderMultiple` function allows you to format the selected items below the select.
 
 ```jsx
-<Form initialValues={{ welcome4: ['github', 'twitter'] }}>
-  <ConnectedField
-    component={Select}
-    isMultiple
-    name="welcome4"
-    label="Social networks"
-    options={constants.ITEMS}
-    renderMultiple={(selected, handleRemove) => {
-      return selected.map(option => {
-        const Icon = option.icon
-        return (
-          <Tag
-            key={option.value}
-            variant="primary"
-            onRemove={() => handleRemove(option.value)}
-            mr="sm"
-            mt="sm"
-            size="lg"
-          >
-            <Icon mr="sm" />
-            <Text variant="body3" m="0">
-              {option.label}
-            </Text>
-          </Tag>
-        )
-      })
-    }}
-  />
-</Form>
+function () {
+  const [value, setValue] = useState(['github', 'twitter'])
+
+  const handleChange = (newValue) => {
+    setValue(newValue)
+  }
+
+  return (
+    <Field label="Social networks">
+      <Select
+        isMultiple
+        name="welcome4"
+        options={constants.ITEMS}
+        value={value}
+        onChange={handleChange}
+        renderMultiple={(selected, handleRemove) => {
+          return selected.map(option => {
+            const Icon = option.icon
+            return (
+              <Tag
+                key={option.value}
+                variant="primary"
+                onRemove={() => handleRemove(option.value)}
+                mr="sm"
+                mt="sm"
+                size="lg"
+              >
+                <Icon mr="sm" />
+                <Text variant="body3" m="0">
+                  {option.label}
+                </Text>
+              </Tag>
+            )
+          })
+        }}
+      />
+    </Field>
+  )
+}
 ```
 
 ## Searchable
@@ -100,15 +137,19 @@ Passing a `renderMultiple` function allows you to format the selected items belo
 To be able to filter (i.e. search) the results, add the `isSearchable` prop.
 
 ```jsx
-<Form initialValues={{}}>
-  <ConnectedField
-    component={Select}
-    isSearchable
-    options={constants.ITEMS}
-    name="welcome5"
-    label="Social networks"
-  />
-</Form>
+function () {
+  const [value, setValue] = useState(null)
+
+  const handleChange = (newValue) => {
+    setValue(newValue)
+  }
+
+  return (
+    <Field label="Social networks">
+      <Select isSearchable options={constants.ITEMS} name="welcome5" value={value} onChange={handleChange} />
+    </Field>
+  )
+}
 ```
 
 ## Add an icon
@@ -116,15 +157,25 @@ To be able to filter (i.e. search) the results, add the `isSearchable` prop.
 Pass `icon` to decorate your `Select`
 
 ```jsx
-<Form initialValues={{}}>
-  <ConnectedField
-    component={Select}
-    icon={<LinkIcon label="Social networks" color="light.100" />}
-    name="welcome6"
-    label="Social networks"
-    options={constants.ITEMS}
-  />
-</Form>
+function () {
+  const [value, setValue] = useState(null)
+
+  const handleChange = (newValue) => {
+    setValue(newValue)
+  }
+
+  return (
+    <Field label="Social networks">
+      <Select
+        icon={<LinkIcon label="Social networks" color="light.100" />}
+        name="welcome6"
+        options={constants.ITEMS}
+        value={value}
+        onChange={handleChange}
+      />
+    </Field>
+  )
+}
 ```
 
 ## Formatting options
@@ -136,22 +187,32 @@ Note: if you use `renderItem` with `isSearchable` or `isCreatable` the selected
 Note: if you want to format the options _and_ the placeholder, create a dummy value as the first of your options with an empty string as the value (see code below).
 
 ```jsx
-<Form initialValues={{ welcome7: 'twitter' }}>
-  <ConnectedField
-    component={Select}
-    name="welcome7"
-    label="Social networks"
-    options={constants.ITEMS}
-    renderItem={option => {
-      const Icon = option.icon
-      return (
-        <div style={{ display: 'flex', alignItems: 'center' }}>
-          <Icon mr="xs" /> <span>{option.label}</span>
-        </div>
-      )
-    }}
-  />
-</Form>
+function () {
+  const [value, setValue] = useState('github')
+
+  const handleChange = (newValue) => {
+    setValue(newValue)
+  }
+
+  return (
+    <Field label="Social networks">
+      <Select
+        name="welcome7"
+        options={constants.ITEMS}
+        value={value}
+        onChange={handleChange}
+        renderItem={option => {
+          const Icon = option.icon
+          return (
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              <Icon mr="xs" /> <span>{option.label}</span>
+            </div>
+          )
+        }}
+      />
+    </Field>
+  )
+}
 ```
 
 ## Creatable
@@ -161,15 +222,19 @@ You can _add_ items by passing the `isCreatable` prop. The returned item will be
 `{ value: 'name-to-be-kebab-cased', label: 'Name to be kebab-cased' }`
 
 ```jsx
-<Form initialValues={{}}>
-  <ConnectedField
-    component={Select}
-    isCreatable
-    options={constants.ITEMS}
-    name="welcome8"
-    label="Social networks"
-  />
-</Form>
+function () {
+  const [value, setValue] = useState(null)
+
+  const handleChange = (newValue) => {
+    setValue(newValue)
+  }
+
+  return (
+    <Field label="Social networks">
+      <Select isCreatable options={constants.ITEMS} name="welcome8" value={value} onChange={handleChange} />
+    </Field>
+  )
+}
 ```
 
 ## Creatable with custom create button
@@ -177,25 +242,35 @@ You can _add_ items by passing the `isCreatable` prop. The returned item will be
 Passing a `renderCreateItem` function allows you to format the create button in the list. It is a function and receives the input value as argument
 
 ```jsx
-<Form initialValues={{}}>
-  <ConnectedField
-    component={Select}
-    isCreatable
-    label="Social networks"
-    name="welcome8"
-    options={constants.ITEMS}
-    renderCreateItem={value => {
-      return (
-        <Box alignItems="center" display="flex">
-          <AddIcon mr="sm" />
-          <Text m={0}>
-            Add <b>{value}</b> as a new social network
-          </Text>
-        </Box>
-      )
-    }}
-  />
-</Form>
+function () {
+  const [value, setValue] = useState(null)
+
+  const handleChange = (newValue) => {
+    setValue(newValue)
+  }
+
+  return (
+    <Field label="Social networks">
+      <Select
+        isCreatable
+        name="welcome9"
+        options={constants.ITEMS}
+        onChange={handleChange}
+        value={value}
+        renderCreateItem={value => {
+          return (
+            <Box alignItems="center" display="flex">
+              <AddIcon mr="sm" />
+              <Text m={0}>
+                Add <b>{value}</b> as a new social network
+              </Text>
+            </Box>
+          )
+        }}
+      />
+    </Field>
+  )
+}
 ```
 
 ## Using allowUnselectFromList and disableCloseOnSelect
@@ -203,29 +278,39 @@ Passing a `renderCreateItem` function allows you to format the create button in
 These two options combined allows you, for example, to build a filter dropdown with checkboxes on each items.
 
 ```jsx
-<Form initialValues={{ welcome9: ['github', 'twitter'] }}>
-  <ConnectedField
-    component={Select}
-    icon={<LinkIcon label="Social networks" color="light.100" />}
-    isMultiple
-    isSearchable
-    options={constants.ITEMS}
-    name="welcome9"
-    label="Filters"
-    allowUnselectFromList
-    disableCloseOnSelect
-    renderItem={(item, selected) => {
-      return (
-        <Box display="flex" justifyContent="space-between">
-          {item.label}
-          <Box>
-            <Checkbox type="checkbox" checked={selected} />
-          </Box>
-        </Box>
-      )
-    }}
-  />
-</Form>
+function () {
+  const [value, setValue] = useState(null)
+
+  const handleChange = (newValue) => {
+    setValue(newValue)
+  }
+
+  return (
+    <Field label="Filters">
+      <Select
+        icon={<LinkIcon label="Social networks" color="light.100" />}
+        isMultiple
+        isSearchable
+        options={constants.ITEMS}
+        name="welcome10"
+        allowUnselectFromList
+        disableCloseOnSelect
+        onChange={handleChange}
+        value={value}
+        renderItem={(item, selected) => {
+          return (
+            <Box display="flex" justifyContent="space-between">
+              {item.label}
+              <Box>
+                <Checkbox type="checkbox" checked={selected} />
+              </Box>
+            </Box>
+          )
+        }}
+      />
+    </Field>
+  )
+}
 ```
 
 ## Combining props
@@ -233,18 +318,28 @@ These two options combined allows you, for example, to build a filter dropdown w
 You can pass any combination of the props above. For example below, we have a `Select` that allows you to search the options, choose multiple options, and create new options.
 
 ```jsx
-<Form initialValues={{ welcome10: ['github', 'twitter'] }}>
-  <ConnectedField
-    component={Select}
-    icon={<LinkIcon label="Social networks" color="light.100" />}
-    isCreatable
-    isMultiple
-    isSearchable
-    options={constants.ITEMS}
-    name="welcome10"
-    label="Social networks"
-  />
-</Form>
+function () {
+  const [value, setValue] = useState(['github', 'twitter'])
+
+  const handleChange = (newValue) => {
+    setValue(newValue)
+  }
+
+  return (
+    <Field label="Social networks">
+      <Select
+        icon={<LinkIcon label="Social networks" color="light.100" />}
+        isCreatable
+        isMultiple
+        isSearchable
+        options={constants.ITEMS}
+        name="welcome11"
+        value={value}
+        onChange={handleChange}
+      />
+    </Field>
+  )
+}
 ```
 
 ## With option groups
@@ -252,26 +347,36 @@ You can pass any combination of the props above. For example below, we have a `S
 To use option groups, you must provide two additional props: `groupsEnabled` that allow nested options and `renderGroupHeader` that renders the header of a specific group
 
 ```jsx
-<Form initialValues={{}}>
-  <ConnectedField
-    component={Select}
-    options={constants.OPT_GROUP_ITEMS}
-    name="welcome11"
-    label="Social networks"
-    groupsEnabled
-    renderGroupHeader={({ label, options }) => (
-      <Box p="xxs">
-        <Box display="flex" justifyContent="space-between" alignItems="center">
-          <Text variant="body3" m="0">
-            {label}
-          </Text>
-          <Tag>{options.length}</Tag>
-        </Box>
-        {options.length === 0 && <Text variant="body4">No results found</Text>}
-      </Box>
-    )}
-  />
-</Form>
+function () {
+  const [value, setValue] = useState(['github', 'twitter'])
+
+  const handleChange = (newValue) => {
+    setValue(newValue)
+  }
+
+  return (
+    <Field label="Social networks">
+      <Select
+        options={constants.OPT_GROUP_ITEMS}
+        name="welcome12"
+        groupsEnabled
+        onChange={handleChange}
+        value={value}
+        renderGroupHeader={({ label, options }) => (
+          <Box p="xxs">
+            <Box display="flex" justifyContent="space-between" alignItems="center">
+              <Text variant="body3" m="0">
+                {label}
+              </Text>
+              <Tag>{options.length}</Tag>
+            </Box>
+            {options.length === 0 && <Text variant="body4">No results found</Text>}
+          </Box>
+        )}
+      />
+    </Field>
+  )
+}
 ```
 
 ## Properties
diff --git a/docs/pages/components/textarea.mdx b/docs/pages/components/textarea.mdx
index 875b45b0e2..eeb9b0c62e 100644
--- a/docs/pages/components/textarea.mdx
+++ b/docs/pages/components/textarea.mdx
@@ -16,18 +16,36 @@ import {
 
 <usage component={component} name={name} peerDependencies={peerDependencies} />
 
-## Usage
+## Default
 
 ```jsx
-<Form initialValues={{}}>
-  <ConnectedField
-    name="textarea"
-    component={Textarea}
-    label="Description"
-    hint="Description must be <200 words"
-    required
-  />
-</Form>
+function () {
+  const [value, setValue] = useState('')
+
+  const handleChange = (event) => {
+    setValue(event.target.value)
+  }
+
+  return <Textarea name="textarea" onChange={handleChange} value={value} />
+}
+```
+
+## With Field
+
+```jsx
+function () {
+  const [value, setValue] = useState('')
+
+  const handleChange = (event) => {
+    setValue(event.target.value)
+  }
+
+  return (
+    <Field label="Description" hint="Description must be <200 words" required>
+      <Textarea name="textarea2" onChange={handleChange} value={value} />
+    </Field>
+  )
+}
 ```
 
 ## Properties
diff --git a/docs/pages/components/time-picker.mdx b/docs/pages/components/time-picker.mdx
index fae000fdf9..ed72cc0e26 100644
--- a/docs/pages/components/time-picker.mdx
+++ b/docs/pages/components/time-picker.mdx
@@ -21,41 +21,55 @@ It is based on the [react-datepicker](https://github.com/Hacker0x01/react-datepi
 ## Simple use case
 
 ```jsx
-<Form initialValues={{ welcome: Date.now() }}>
-  <ConnectedField
-    component={TimePicker}
-    label="Time"
-    name="welcome"
-    onChange={date => console.log('date: ', date)}
-  />
-</Form>
+function () {
+  const [value, setValue] = useState(Date.now())
+
+  const handleChange = newValue => {
+    setValue(newValue)
+  }
+
+  return (
+    <Field label="Time">
+      <TimePicker name="welcome" onChange={handleChange} value={value} />
+    </Field>
+  )
+}
 ```
 
 ## Add an icon on the right
 
 ```jsx
-<Form initialValues={{ welcome2: Date.now() }}>
-  <ConnectedField
-    component={TimePicker}
-    icon={<DateIcon color="light.100" />}
-    iconPlacement="right"
-    label="Time"
-    name="welcome2"
-  />
-</Form>
+function () {
+  const [value, setValue] = useState(Date.now())
+
+  const handleChange = newValue => {
+    setValue(newValue)
+  }
+
+  return (
+    <Field label="Time">
+      <TimePicker icon={<DateIcon color="light.100" />} iconPlacement="right" name="welcome2" onChange={handleChange} value={value} />
+    </Field>
+  )
+}
 ```
 
 ## Pass props to TimePicker
 
 ```jsx
-<Form initialValues={{ welcome3: Date.now() }}>
-  <ConnectedField
-    name="welcome3"
-    component={TimePicker}
-    popperProps={{ zIndex: 50 }}
-    timeIntervals={30}
-  />
-</Form>
+function () {
+  const [value, setValue] = useState(Date.now())
+
+  const handleChange = newValue => {
+    setValue(newValue)
+  }
+
+  return (
+    <Field>
+      <TimePicker name="welcome3" popperProps={{ zIndex: 50 }} timeIntervals={30} onChange={handleChange} value={value} />
+    </Field>
+  )
+}
 ```
 
 ## Properties
diff --git a/docs/pages/components/toggle.mdx b/docs/pages/components/toggle.mdx
index b45a9c69ec..9143d8f050 100644
--- a/docs/pages/components/toggle.mdx
+++ b/docs/pages/components/toggle.mdx
@@ -52,28 +52,24 @@ function() {
 }
 ```
 
-## ConnectedField
+## Field
 
-Examples with `ConnectedField`
+Examples with `Field`
 
 ```jsx
-<Form
-  initialValues={{
-    toggle: true,
-    'toogle-checked': true,
-    'toogle-disabled': true,
-    'toggle-label': false,
-    'disabled-label': true,
-  }}
->
-  <Box display="flex" mb="lg">
-    <ConnectedField name="toggle" component={Toggle} mr="lg" />
-    <ConnectedField name="toggle-checked" component={Toggle} mr="lg" />
-    <ConnectedField name="toggle-disabled" component={Toggle} disabled />
-  </Box>
-  <ConnectedField name="toggle-label" component={Toggle} label="Toggle with a label" mb="lg" />
-  <ConnectedField name="disabled-label" component={Toggle} label="Disabled with a label" disabled />
-</Form>
+function () {
+  const [checked, setChecked] = useState(false)
+
+  const handleToggle = () => {
+    setChecked(!checked)
+  }
+
+  return (
+    <Field label="Toggle">
+      <Toggle mr="lg" checked={checked} onClick={handleToggle} disabled />
+    </Field>
+  )
+}
 ```
 
 ## Properties
@@ -87,3 +83,4 @@ Examples with `ConnectedField`
 ## Peer dependencies
 
 <dependencies dependencies={peerDependencies} />
+```
diff --git a/docs/pages/theming/x-styled.mdx b/docs/pages/theming/x-styled.mdx
index 50ab5b7057..25f81e8161 100644
--- a/docs/pages/theming/x-styled.mdx
+++ b/docs/pages/theming/x-styled.mdx
@@ -1,120 +1,5 @@
 # X-Styled
 
-With [xstyled/system](https://xstyled.dev/docs/composing-utilities/) you can easily override styles for your components. When you use a component (e.g. `Select`) that is wrapped by a container component (e.g. `Field` or `ConnectedField`), we want to make sure that the correct style props are passed to the correct component i.e. which props affect `ConnectedField` and which props affect `Select`.
-
-We split these props at the container level so that…
-
-1. width, margin and positioning props are applied to the container (e.g. `w`, `margin`, `mt`, `position`, `top` etc), and
-2. all the rest are applied to the underlying component (e.g. `padding`, `borderColor`, `fontSize` etc).
-
-## Naked Select
-
-```jsx
-function() {
-  const ITEMS = [
-    { value: 'angular', label: 'Angular' },
-    { value: 'backbone', label: 'Backbone' },
-    { value: 'elm', label: 'Elm' },
-    { value: 'ember', label: 'Ember' },
-    { value: 'react', label: 'React' },
-    { value: 'vue', label: 'Vue' }
-  ]
-  const [value, setValue] = useState()
-  const handleChange = value => setValue(value)
-
-  return (
-    <Select
-      options={ITEMS}
-      name="default"
-      onChange={handleChange}
-      value={value}
-      label="JS Library"
-      margin={{ xs: 10, md: 50 }}
-      w={{ xs: 200, md: 350 }}
-      maxWidth="100%"
-      h="auto"
-      borderColor="salmon"
-      borderWidth={4}
-      borderRadius={50}
-      padding={20}
-    />
-  )
-}
 ```
-
-## Connected Select
-
-```jsx
-function() {
-  const networks = [
-    { value: 'behance', label: 'Behance' },
-    { value: 'dribbble', label: 'Dribbble' },
-    { value: 'facebook', label: 'Facebook' },
-    { value: 'github', label: 'Github' },
-    { value: 'instagram', label: 'Instagram' },
-    { value: 'linkedin', label: 'Linkedin' },
-    { value: 'stackoverflow', label: 'Stack Overflow' },
-    { value: 'twitter', label: 'Twitter' },
-    { value: 'xing', label: 'Xing' },
-    { value: 'youtube', label: 'Youtube' }
-  ]
-
-  return (
-    <FinalForm
-      initialValues={{}}
-      onSubmit={console.debug}
-      validate={values => {
-        let errors = {}
-        if (!values.lastName) {
-          errors.lastName = 'Required'
-        }
-        return errors
-      }}
-      render={({ form, handleSubmit, values }) => {
-        return (
-          <form onSubmit={handleSubmit}>
-            <ConnectedField
-              name="network"
-              component={Select}
-              options={networks}
-              label="Social network"
-              placeholder="Choose network"
-              margin={{ xs: 10, md: 50 }}
-              w={{ xs: 200, md: 350 }}
-              h="auto"
-              borderColor="salmon"
-              borderWidth={4}
-              borderRadius={50}
-              padding={20}
-            />
-          </form>
-        )
-      }}
-    />
-  )
-}
-```
-
-## Field Select
-
-```jsx
-<Field
-  name="cakes"
-  placeholder="Placeholder"
-  component={Select}
-  label="Label"
-  onChange={() => {}}
-  options={[
-    { value: 'carrot', label: 'Carrot' },
-    { value: 'madeleine', label: 'Madeleine (made with farm-fresh eggs)' },
-    { value: 'pumpkin', label: 'Pumpkin' },
-  ]}
-  margin={{ xs: 10, md: 50 }}
-  w={{ xs: 200, md: 350 }}
-  h="auto"
-  borderColor="salmon"
-  borderWidth={4}
-  borderRadius={50}
-  padding={20}
-/>
+  TODO Rework this page
 ```
diff --git a/packages/Checkbox/index.test.tsx b/packages/Checkbox/index.test.tsx
index c902d6062c..b5ac803d48 100644
--- a/packages/Checkbox/index.test.tsx
+++ b/packages/Checkbox/index.test.tsx
@@ -1,62 +1,37 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { fireEvent } from '@testing-library/react'
-import { ConnectedField } from '@welcome-ui/connected-field'
 
-import { Form, getFormValues } from '../../utils/Form'
 import { render } from '../../utils/tests'
 
-import { Checkbox } from './index'
+import { Checkbox, CheckboxOptions } from './index'
 
-const expectChecked = (element, valuesElement, value) => {
-  const formValues = getFormValues(valuesElement)
-  expect(element.getAttribute('aria-checked')).toBe(`${value}`)
-  expect(!!formValues.checkbox).toBe(value)
-}
-
-test('<Checkbox> toggles on input click', () => {
-  const { container, getByTestId } = render(
-    <Form initialValues={{}}>
-      <ConnectedField
-        component={Checkbox}
-        dataTestId="inputCheckbox"
-        label="Checkbox"
-        name="checkbox"
-      />
-    </Form>
-  )
-  const inputCheckbox = getByTestId('inputCheckbox')
-  const label = container.querySelector('label')
-
-  expect(label).toHaveTextContent('Checkbox')
-  expectChecked(inputCheckbox, container, false)
+const CheckboxWrapper: React.FC<CheckboxOptions> = props => {
+  const [value, setValue] = useState(false)
 
-  fireEvent.click(inputCheckbox)
-  expectChecked(inputCheckbox, container, true)
+  const handleChange = () => {
+    setValue(!value)
+  }
 
-  fireEvent.click(inputCheckbox)
-  expectChecked(inputCheckbox, container, false)
-})
-
-test('<Checkbox> toggles on label click', () => {
-  const { container, getByTestId } = render(
-    <Form initialValues={{}}>
-      <ConnectedField
-        component={Checkbox}
-        dataTestId="inputCheckbox"
-        label="Checkbox"
-        name="checkbox"
-      />
-    </Form>
+  return (
+    <Checkbox
+      checked={value}
+      dataTestId="checkbox"
+      name="checkbox"
+      onChange={handleChange}
+      {...props}
+    />
   )
-  const inputCheckbox = getByTestId('inputCheckbox')
-  const label = container.querySelector('label')
+}
+
+test('<Checkbox> toggles on input click', () => {
+  const { getByTestId } = render(<CheckboxWrapper />)
+  const checkbox = getByTestId('checkbox')
 
-  expect(label).toHaveTextContent('Checkbox')
-  expectChecked(inputCheckbox, container, false)
+  expect(checkbox.getAttribute('aria-checked')).toBe('false')
 
-  fireEvent.click(label)
-  expectChecked(inputCheckbox, container, true)
+  fireEvent.click(checkbox)
+  expect(checkbox.getAttribute('aria-checked')).toBe('true')
 
-  fireEvent.click(label)
-  expectChecked(inputCheckbox, container, false)
+  fireEvent.click(checkbox)
+  expect(checkbox.getAttribute('aria-checked')).toBe('false')
 })
diff --git a/packages/Checkbox/index.tsx b/packages/Checkbox/index.tsx
index d7e11c4a76..08b9f3794e 100644
--- a/packages/Checkbox/index.tsx
+++ b/packages/Checkbox/index.tsx
@@ -1,19 +1,20 @@
 import React from 'react'
 import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
+import { DefaultFieldStylesProps } from '@welcome-ui/utils'
 
 import * as S from './styles'
 
-export interface CheckboxOptions {
+export type CheckboxOptions = {
   checked?: boolean
   Component?: React.ElementType
   disabled?: boolean
   name?: string
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
-}
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+} & DefaultFieldStylesProps
 
 export type CheckboxProps = CreateWuiProps<'input', CheckboxOptions>
 
-const CheckboxComponent = forwardRef<'input', CheckboxProps>(
+export const Checkbox = forwardRef<'input', CheckboxProps>(
   (
     { checked = false, Component = S.Checkbox, dataTestId, disabled, name, onChange, ...rest },
     ref
@@ -38,8 +39,4 @@ const CheckboxComponent = forwardRef<'input', CheckboxProps>(
   }
 )
 
-CheckboxComponent.displayName = 'Checkbox'
-
-export const Checkbox = Object.assign(CheckboxComponent, {
-  type: 'Checkbox',
-})
+Checkbox.displayName = 'Checkbox'
diff --git a/packages/Checkbox/styles.ts b/packages/Checkbox/styles.ts
index d1b5956f95..7fbceccdee 100644
--- a/packages/Checkbox/styles.ts
+++ b/packages/Checkbox/styles.ts
@@ -1,19 +1,16 @@
 import styled, { css } from '@xstyled/styled-components'
 import { th } from '@xstyled/system'
 import { Checkbox as ReakitCheckbox } from 'reakit/Checkbox'
-import { componentSystem, shouldForwardProp, system } from '@welcome-ui/system'
+import { shouldForwardProp, system } from '@welcome-ui/system'
 import { defaultFieldStyles } from '@welcome-ui/utils'
 
-export interface StyledCheckboxProps {
-  connected?: boolean
-  order: string
-}
+import { CheckboxProps } from './index'
 
 export const Checkbox = styled(ReakitCheckbox).withConfig({
   shouldForwardProp,
-})<StyledCheckboxProps>(
-  ({ connected, order = '-1', theme }) => css`
-    ${defaultFieldStyles({})};
+})<CheckboxProps>(
+  ({ order = '-1', size, theme, variant }) => css`
+    ${defaultFieldStyles({ size, variant })};
     ${th('checkboxes.default')}
     position: relative;
     padding: 0;
@@ -44,6 +41,6 @@ export const Checkbox = styled(ReakitCheckbox).withConfig({
       ${th('checkboxes.disabled')}
     }
 
-    ${connected ? componentSystem : system};
+    ${system};
   `
 )
diff --git a/packages/ConnectedField/.npmignore b/packages/ConnectedField/.npmignore
deleted file mode 100644
index 9255311d8b..0000000000
--- a/packages/ConnectedField/.npmignore
+++ /dev/null
@@ -1,2 +0,0 @@
-/*
-!/dist/*.js
diff --git a/packages/ConnectedField/CHANGELOG.md b/packages/ConnectedField/CHANGELOG.md
deleted file mode 100644
index 62c251aa85..0000000000
--- a/packages/ConnectedField/CHANGELOG.md
+++ /dev/null
@@ -1,323 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [3.11.0](https://github.com/WTTJ/welcome-ui/compare/v3.10.0...v3.11.0) (2021-11-02)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-# [3.10.0](https://github.com/WTTJ/welcome-ui/compare/v3.9.0...v3.10.0) (2021-10-27)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-## [3.8.4](https://github.com/WTTJ/welcome-ui/compare/v3.8.3...v3.8.4) (2021-09-15)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-## [3.4.3](https://github.com/WTTJ/welcome-ui/compare/v3.4.2...v3.4.3) (2021-04-28)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-# [3.4.0](https://github.com/WTTJ/welcome-ui/compare/v3.3.0...v3.4.0) (2021-04-19)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-## [3.0.1](https://github.com/WTTJ/welcome-ui/compare/v3.0.0...v3.0.1) (2021-03-15)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-## [2.15.3](https://github.com/WTTJ/welcome-ui/compare/v2.15.2...v2.15.3) (2021-02-04)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-## [2.6.1](https://github.com/WTTJ/welcome-ui/compare/v2.6.0...v2.6.1) (2020-10-13)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-## [2.1.3](https://github.com/WTTJ/welcome-ui/compare/v2.1.2...v2.1.3) (2020-08-27)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-## [2.0.2](https://github.com/WTTJ/welcome-ui/compare/v2.0.1...v2.0.2) (2020-08-04)
-
-
-### Bug Fixes
-
-* https for all links ([#755](https://github.com/WTTJ/welcome-ui/issues/755)) ([6b8e0ea](https://github.com/WTTJ/welcome-ui/commit/6b8e0ea7807486510169437bb909cb65038ff6f5))
-
-
-
-
-
-# [1.29.0](https://github.com/WTTJ/welcome-ui/compare/v1.28.0...v1.29.0) (2020-05-27)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-# [1.27.0](https://github.com/WTTJ/welcome-ui/compare/v1.26.4...v1.27.0) (2020-05-25)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-## [1.26.4](https://github.com/WTTJ/welcome-ui/compare/v1.26.3...v1.26.4) (2020-05-07)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-## [1.26.3](https://github.com/WTTJ/welcome-ui/compare/v1.26.2...v1.26.3) (2020-05-07)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-## [1.26.1](https://github.com/WTTJ/welcome-ui/compare/v1.26.0...v1.26.1) (2020-05-05)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-## [1.25.2](https://github.com/WTTJ/welcome-ui/compare/v1.25.1...v1.25.2) (2020-04-28)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-## [1.25.1](https://github.com/WTTJ/welcome-ui/compare/v1.25.0...v1.25.1) (2020-04-23)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-# [1.22.0](https://github.com/WTTJ/welcome-ui/compare/v1.21.2...v1.22.0) (2020-04-10)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-## [1.21.2](https://github.com/WTTJ/welcome-ui/compare/v1.21.1...v1.21.2) (2020-04-09)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-# [1.20.0](https://github.com/WTTJ/welcome-ui/compare/v1.19.2...v1.20.0) (2020-04-06)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-# [1.19.0](https://github.com/WTTJ/welcome-ui/compare/v1.18.1...v1.19.0) (2020-04-02)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-## [1.18.1](https://github.com/WTTJ/welcome-ui/compare/v1.18.0...v1.18.1) (2020-03-27)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-# [1.13.0](https://github.com/WTTJ/welcome-ui/compare/v1.12.0...v1.13.0) (2020-03-20)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-# [1.10.0](https://github.com/WTTJ/welcome-ui/compare/v1.9.3...v1.10.0) (2020-02-17)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-## [1.9.3](https://github.com/WTTJ/welcome-ui/compare/v1.9.2...v1.9.3) (2020-02-12)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-## [1.9.2](https://github.com/WTTJ/welcome-ui/compare/v1.9.1...v1.9.2) (2020-02-12)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-## [1.9.1](https://github.com/WTTJ/welcome-ui/compare/v1.9.0...v1.9.1) (2020-02-12)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-# [1.9.0](https://github.com/WTTJ/welcome-ui/compare/v1.8.0...v1.9.0) (2020-02-12)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-# [1.8.0](https://github.com/WTTJ/welcome-ui/compare/v1.7.1...v1.8.0) (2020-02-11)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-## [1.7.1](https://github.com/WTTJ/welcome-ui/compare/v1.7.0...v1.7.1) (2020-02-04)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-# [1.7.0](https://github.com/WTTJ/welcome-ui/compare/v1.6.3...v1.7.0) (2020-02-04)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-# [1.6.0](https://github.com/WTTJ/welcome-ui/compare/v1.5.3...v1.6.0) (2020-01-28)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-## [1.5.2](https://github.com/WTTJ/welcome-ui/compare/v1.5.1...v1.5.2) (2020-01-21)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-# [1.4.0](https://github.com/WTTJ/welcome-ui/compare/v1.3.0...v1.4.0) (2020-01-15)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-# [1.3.0](https://github.com/WTTJ/welcome-ui/compare/v1.2.0...v1.3.0) (2020-01-14)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-# [1.2.0](https://github.com/WTTJ/welcome-ui/compare/v1.1.6...v1.2.0) (2020-01-13)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-## [1.1.6](https://github.com/WTTJ/welcome-ui/compare/v1.1.5...v1.1.6) (2020-01-10)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-## [1.1.5](https://github.com/WTTJ/welcome-ui/compare/v1.1.4...v1.1.5) (2020-01-10)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-## [1.1.4](https://github.com/WTTJ/welcome-ui/compare/v1.1.3...v1.1.4) (2020-01-08)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
-
-
-
-
-
-## [1.1.2](https://github.com/WTTJ/welcome-ui/compare/v1.1.1...v1.1.2) (2020-01-07)
-
-**Note:** Version bump only for package @welcome-ui/connected-field
diff --git a/packages/ConnectedField/README.md b/packages/ConnectedField/README.md
deleted file mode 100644
index 51ff8ac835..0000000000
--- a/packages/ConnectedField/README.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# @welcome-ui/connected-field
-
-The ConnectedField component from [@welcome-ui](https://welcome-ui.com).
-
-![npm bundle size](https://img.shields.io/bundlephobia/minzip/@welcome-ui/connected-field) [![License](https://img.shields.io/npm/l/welcome-ui.svg)](https://github.com/WTTJ/welcome-ui/blob/master/LICENSE) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-mediumspringgreen.svg)](ttps://github.com/WTTJ/welcome-ui/blob/master/CONTRIBUTING.mdx)
-
-## Installation
-
-    yarn add @welcome-ui/connected-field
-
-## Import
-
-    import { ConnectedField } from '@welcome-ui/connected-field'
-
-## Documentation
-
-See the [package source](https://github.com/WTTJ/welcome-ui/tree/master/packages/ConnectedField) for more details.
diff --git a/packages/ConnectedField/index.js b/packages/ConnectedField/index.js
deleted file mode 100644
index f98fc14980..0000000000
--- a/packages/ConnectedField/index.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React, { forwardRef } from 'react'
-import { node, oneOfType, string } from 'prop-types'
-import { Field as FinalField } from 'react-final-form'
-import { Field, getBaseType } from '@welcome-ui/field'
-
-import { COMPONENT_TYPE } from '../../utils/propTypes'
-
-export const ConnectedField = forwardRef(({ children, component, type, ...rest }, ref) => {
-  if (!children && !component) {
-    return null
-  }
-
-  return (
-    <FinalField type={getBaseType(component.type || type)} {...rest}>
-      {({ input, meta }) => (
-        <Field
-          ref={ref}
-          {...input}
-          {...meta}
-          error={meta.error || meta.submitError}
-          {...rest}
-          component={component}
-          connected
-        >
-          {children}
-        </Field>
-      )}
-    </FinalField>
-  )
-})
-
-ConnectedField.displayName = 'WelcomeField'
-
-ConnectedField.propTypes /* remove-proptypes */ = {
-  children: node,
-  component: oneOfType(COMPONENT_TYPE),
-  type: string,
-}
diff --git a/packages/ConnectedField/index.test.js b/packages/ConnectedField/index.test.js
deleted file mode 100644
index d682385639..0000000000
--- a/packages/ConnectedField/index.test.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { createRef } from 'react'
-import { InputText } from '@welcome-ui/input-text'
-
-import { Form } from '../../utils/Form'
-import { render } from '../../utils/tests'
-
-import { ConnectedField } from './index'
-
-const content = 'Jungle'
-
-describe('<ConnectedField>', () => {
-  it('should render correctly and hold `ref`', () => {
-    const fieldRef = createRef()
-    const { getByTestId } = render(
-      <Form initialValues={{ jungle: content }}>
-        <ConnectedField component={InputText} dataTestId="input" name="jungle" ref={fieldRef} />
-      </Form>
-    )
-
-    const input = getByTestId('input')
-    expect(input).toHaveValue(content)
-    expect(fieldRef.current.name).toEqual('jungle')
-  })
-
-  it('should throw error if no component provided', () => {
-    const { container } = render(
-      <Form initialValues={{ jungle: content }}>
-        <ConnectedField dataTestId="input" name="jungle" />
-      </Form>
-    )
-
-    const form = container.querySelector('form')
-    expect(form).toBeEmptyDOMElement()
-  })
-})
diff --git a/packages/ConnectedField/package.json b/packages/ConnectedField/package.json
deleted file mode 100644
index 55386195b4..0000000000
--- a/packages/ConnectedField/package.json
+++ /dev/null
@@ -1,53 +0,0 @@
-{
-  "name": "@welcome-ui/connected-field",
-  "version": "4.0.0-alpha.12",
-  "description": "Customizable design system with react • styled-components • styled-system and reakit.",
-  "main": "dist/connected-field.cjs.js",
-  "module": "dist/connected-field.es.js",
-  "scripts": {
-    "build": "rollup -c",
-    "watch": "rollup -c -w",
-    "test": "jest"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/WTTJ/welcome-ui.git"
-  },
-  "keywords": [
-    "design-system",
-    "react",
-    "reakit",
-    "styled-components",
-    "styled-system",
-    "ui-library",
-    "ui",
-    "ux",
-    "jungle",
-    "welcome",
-    "WTTJ"
-  ],
-  "author": "WTTJ <tech@wttj.co>",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/WTTJ/welcome-ui/issues"
-  },
-  "devDependencies": {
-    "@welcome-ui/input-text": "^4.0.0-alpha.12"
-  },
-  "dependencies": {
-    "@welcome-ui/field": "^4.0.0-alpha.12"
-  },
-  "peerDependencies": {
-    "react": "^16.10.2 || ^17.0.1",
-    "react-dom": "^16.10.2 || ^17.0.1",
-    "react-final-form": "^6.5.2",
-    "styled-components": "^5.3.0"
-  },
-  "gitHead": "6d279e3c89ce7bd16a2e90245aaebaea2bd69462",
-  "sideEffects": false,
-  "component": "ConnectedField",
-  "homepage": "https://welcome-ui.com"
-}
diff --git a/packages/ConnectedField/rollup.config.js b/packages/ConnectedField/rollup.config.js
deleted file mode 100644
index 3dee263450..0000000000
--- a/packages/ConnectedField/rollup.config.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { getRollupConfig } from '../../rollup.config.js'
-
-export default getRollupConfig({ pwd: __dirname })
diff --git a/packages/Core/theme/defaultFields.ts b/packages/Core/theme/defaultFields.ts
index d17723420b..1f30a5121f 100644
--- a/packages/Core/theme/defaultFields.ts
+++ b/packages/Core/theme/defaultFields.ts
@@ -1,10 +1,9 @@
 import { CSSObject } from '@xstyled/system'
+import { Size } from '@welcome-ui/utils'
 
 import { ThemeFocus } from './focus'
 import { WuiTheme } from './types'
 
-type Size = 'sm' | 'md' | 'lg'
-
 export type ThemeDefaultFields = {
   default: CSSObject
   sizes: Record<Size, CSSObject>
diff --git a/packages/DatePicker/index.js b/packages/DatePicker/index.js
index 96d43061bc..7f9e9fab72 100644
--- a/packages/DatePicker/index.js
+++ b/packages/DatePicker/index.js
@@ -60,7 +60,7 @@ export const DatePicker = forwardRef(
       //eslint-disable-next-line
     }, [value])
 
-    const blur = () => inputReference.current.blur()
+    const blur = () => inputReference?.current.blur()
 
     const handleFocus = e => {
       setFocused('date')
@@ -82,7 +82,7 @@ export const DatePicker = forwardRef(
       e.preventDefault()
       blur()
       setDate(null)
-      onChange && onChange()
+      onChange && onChange(null)
     }
 
     const handleChange = newDate => {
diff --git a/packages/DateTimePicker/index.test.js b/packages/DateTimePicker/index.test.js
index 01a0b02315..793eb12efe 100644
--- a/packages/DateTimePicker/index.test.js
+++ b/packages/DateTimePicker/index.test.js
@@ -1,9 +1,7 @@
 import React from 'react'
 import { fireEvent } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { ConnectedField } from '@welcome-ui/connected-field'
 
-import { Form, getFormValues } from '../../utils/Form'
 import { render } from '../../utils/tests'
 
 import { DateTimePicker } from './index'
@@ -26,9 +24,7 @@ jest.mock('popper.js', () => {
 describe('<DateTimePicker />', () => {
   test('<DateTimePicker> renders correctly', () => {
     const { getByTestId } = render(
-      <Form initialValues={{ welcome: new Date() }}>
-        <ConnectedField component={DateTimePicker} dataTestId="dateTimePicker" name="welcome" />
-      </Form>
+      <DateTimePicker dataTestId="dateTimePicker" name="welcome" value={new Date()} />
     )
     const dateTimePicker = getByTestId('dateTimePicker')
 
@@ -40,9 +36,7 @@ describe('<DateTimePicker />', () => {
 
   test('<DateTimePicker> renders correctly with invalid date', () => {
     const { getByTestId } = render(
-      <Form initialValues={{ welcome: '2019-11-23' }}>
-        <ConnectedField component={DateTimePicker} dataTestId="dateTimePicker" name="welcome" />
-      </Form>
+      <DateTimePicker dataTestId="dateTimePicker" name="welcome" value="2019-11-23" />
     )
     const dateTimePicker = getByTestId('dateTimePicker')
 
@@ -53,11 +47,7 @@ describe('<DateTimePicker />', () => {
   })
 
   test('can render and opens the datePicker on click', () => {
-    const { baseElement, container } = render(
-      <Form initialValues={{ welcome: new Date() }}>
-        <ConnectedField component={DateTimePicker} name="welcome" />
-      </Form>
-    )
+    const { baseElement, container } = render(<DateTimePicker name="welcome" value={new Date()} />)
     const datePicker = container.querySelector('.date-picker')
     fireEvent.click(datePicker)
 
@@ -68,11 +58,7 @@ describe('<DateTimePicker />', () => {
   })
 
   test('can render and opens the timePicker on click', () => {
-    const { baseElement, container } = render(
-      <Form initialValues={{ welcome: new Date() }}>
-        <ConnectedField component={DateTimePicker} name="welcome" />
-      </Form>
-    )
+    const { baseElement, container } = render(<DateTimePicker name="welcome" value={new Date()} />)
     const timePicker = container.querySelector('.time-picker')
     fireEvent.click(timePicker)
 
@@ -84,9 +70,7 @@ describe('<DateTimePicker />', () => {
 
   test('<DateTimePicker> renders month select', () => {
     const { container, getAllByRole } = render(
-      <Form initialValues={{ welcome: new Date('09/11/2001') }}>
-        <ConnectedField component={DateTimePicker} name="welcome" />
-      </Form>
+      <DateTimePicker name="welcome" value={new Date('09/11/2001')} />
     )
     const datePicker = container.querySelector('.date-picker')
     expect(datePicker).toHaveValue('11/09/2001')
@@ -101,9 +85,7 @@ describe('<DateTimePicker />', () => {
 
   test('<DateTimePicker> can proceed through next/prev months', () => {
     const { container, getAllByRole, getByTitle } = render(
-      <Form initialValues={{ welcome: new Date('09/11/2001') }}>
-        <ConnectedField component={DateTimePicker} name="welcome" />
-      </Form>
+      <DateTimePicker name="welcome" value={new Date('09/11/2001')} />
     )
     const datePicker = container.querySelector('.date-picker')
 
@@ -138,9 +120,7 @@ describe('<DateTimePicker />', () => {
 
   test('<DateTimePicker> updating text updates selects', () => {
     const { container, getAllByRole } = render(
-      <Form initialValues={{ welcome: new Date('09/11/2001') }}>
-        <ConnectedField component={DateTimePicker} name="welcome" />
-      </Form>
+      <DateTimePicker name="welcome" value={new Date('09/11/2001')} />
     )
     const datePicker = container.querySelector('.date-picker')
 
@@ -154,11 +134,7 @@ describe('<DateTimePicker />', () => {
   })
 
   test('<DatePicker> can be cleared and has no `ClearButton` when no value', () => {
-    const { container, getAllByRole, getByTestId } = render(
-      <Form initialValues={{ welcome: new Date() }}>
-        <ConnectedField component={DateTimePicker} name="welcome" />
-      </Form>
-    )
+    const { container, getAllByRole } = render(<DateTimePicker name="welcome" value={new Date()} />)
 
     const datePicker = container.querySelector('.date-picker')
     const [clearButton] = getAllByRole('button')
@@ -167,8 +143,6 @@ describe('<DateTimePicker />', () => {
 
     expect(datePicker).toHaveValue('')
 
-    const formValues = getFormValues(getByTestId('values'))
-    expect(formValues.welcome).toBeNull()
     expect(clearButton).not.toBeInTheDocument()
 
     userEvent.type(datePicker, '20/06/2018')
diff --git a/packages/DateTimePickerCommon/CustomInput.tsx b/packages/DateTimePickerCommon/CustomInput.tsx
index 65c57d3f9a..ac3e807373 100644
--- a/packages/DateTimePickerCommon/CustomInput.tsx
+++ b/packages/DateTimePickerCommon/CustomInput.tsx
@@ -2,13 +2,13 @@ import React from 'react'
 import { IconWrapper } from '@welcome-ui/field'
 import { ClearButton } from '@welcome-ui/clear-button'
 import { CreateWuiProps } from '@welcome-ui/system'
+import { DefaultFieldStylesProps } from '@welcome-ui/utils'
 
 import * as S from './styles'
 
 export type Focused = 'date' | 'time' | null
 export type Icon = JSX.Element
 export type IconPlacement = 'right' | 'left'
-export type Size = 'sm' | 'md' | 'lg'
 
 export interface CustomInputOptions {
   focused: Focused
@@ -18,7 +18,7 @@ export interface CustomInputOptions {
   iconPlacement?: IconPlacement
   inputRef: React.MutableRefObject<HTMLInputElement>
   onReset?: (event: React.MouseEvent<HTMLButtonElement>) => void
-  size?: Size
+  size?: DefaultFieldStylesProps['size']
   value: string | null
 }
 
diff --git a/packages/DateTimePickerCommon/styles.ts b/packages/DateTimePickerCommon/styles.ts
index 33ba9d15f5..faaf629f28 100644
--- a/packages/DateTimePickerCommon/styles.ts
+++ b/packages/DateTimePickerCommon/styles.ts
@@ -7,22 +7,26 @@ import { StyledButton } from '@welcome-ui/button'
 import { StyledClearButton } from '@welcome-ui/clear-button'
 import { componentSystem, shouldForwardProp } from '@welcome-ui/system'
 import { StyledSelect } from '@welcome-ui/select'
-import { defaultFieldStyles } from '@welcome-ui/utils'
+import { defaultFieldStyles, DefaultFieldStylesProps } from '@welcome-ui/utils'
 
-import { Focused, Icon, IconPlacement, Size } from './CustomInput'
+import { Focused, Icon, IconPlacement } from './CustomInput'
 
-export const StyledDatePicker = styled(ReactDatePicker)`
-  ${defaultFieldStyles({})};
-  ${componentSystem};
-`
+export const StyledDatePicker = styled(ReactDatePicker)<DefaultFieldStylesProps>(
+  ({ size, variant }) => css`
+    ${defaultFieldStyles({ size, variant })};
+    ${componentSystem};
+  `
+)
 
-export const StyledTimePicker = styled(ReactDatePicker)`
-  ${defaultFieldStyles({})};
-  text-align: center;
-  ${componentSystem};
-`
+export const StyledTimePicker = styled(ReactDatePicker)<DefaultFieldStylesProps>(
+  ({ size, variant }) => css`
+    ${defaultFieldStyles({ size, variant })};
+    text-align: center;
+    ${componentSystem};
+  `
+)
 
-const iconPlacementStyles = (placement: IconPlacement, size: Size) => {
+const iconPlacementStyles = (placement: IconPlacement, size: DefaultFieldStylesProps['size']) => {
   if (placement === 'right') {
     return css`
       ${StyledDatePicker}, ${StyledTimePicker} {
@@ -61,7 +65,7 @@ export const CustomInput = styled('div').withConfig({ shouldForwardProp })(
     focused: Focused
     icon: Icon
     iconPlacement: IconPlacement
-    size: Size
+    size: DefaultFieldStylesProps['size']
   }) => {
     return css`
       position: relative;
diff --git a/packages/Field/index.test.tsx b/packages/Field/index.test.tsx
new file mode 100644
index 0000000000..947fdfce8c
--- /dev/null
+++ b/packages/Field/index.test.tsx
@@ -0,0 +1,172 @@
+import React from 'react'
+import userEvent from '@testing-library/user-event'
+
+import { render } from '../../utils/tests'
+
+import { Field } from './index'
+
+const Input: React.FC<React.InputHTMLAttributes<HTMLInputElement>> = props => {
+  return <input name="" type="text" {...props} />
+}
+
+const labelText = 'Label'
+const hintText = 'Hint'
+const errorText = 'Error'
+
+describe('<Field />', () => {
+  it('should render', () => {
+    const { getByTestId } = render(
+      <Field dataTestId="field">
+        <Input />
+      </Field>
+    )
+    const field = getByTestId('field')
+    expect(field).toBeInTheDocument()
+
+    const input = field.querySelector('input')
+    expect(input).toBeInTheDocument()
+
+    const label = field.querySelector('label')
+    expect(label).not.toBeInTheDocument()
+
+    const hint = field.querySelector('div')
+    expect(hint).not.toBeInTheDocument()
+  })
+
+  it('should display label', () => {
+    const { getByTestId } = render(
+      <Field dataTestId="field" label={labelText}>
+        <Input />
+      </Field>
+    )
+    const field = getByTestId('field')
+    expect(field).toBeInTheDocument()
+
+    const input = field.querySelector('input')
+    expect(input).toBeInTheDocument()
+
+    const hint = field.querySelector('div')
+    expect(hint).not.toBeInTheDocument()
+
+    const label = field.querySelector('label')
+    expect(label).toBeInTheDocument()
+    expect(label).toHaveTextContent(labelText)
+  })
+
+  it('should display hint', () => {
+    const { getByTestId } = render(
+      <Field dataTestId="field" hint={hintText}>
+        <Input />
+      </Field>
+    )
+    const field = getByTestId('field')
+    expect(field).toBeInTheDocument()
+
+    const input = field.querySelector('input')
+    expect(input).toBeInTheDocument()
+
+    const hint = field.querySelector('div')
+    expect(hint).toBeInTheDocument()
+    expect(hint).toHaveTextContent(hintText)
+  })
+
+  it('should display error until hint', () => {
+    const { getByTestId } = render(
+      <Field dataTestId="field" error={errorText} hint={hintText}>
+        <Input />
+      </Field>
+    )
+    const field = getByTestId('field')
+    expect(field).toBeInTheDocument()
+
+    const hint = field.querySelector('div')
+    expect(hint).toBeInTheDocument()
+    expect(hint).toHaveTextContent(errorText)
+
+    const input = field.querySelector('input')
+    expect(input).toBeInTheDocument()
+    expect(input).toHaveAttribute('variant', 'error')
+  })
+
+  it('should display label before input', () => {
+    const { getByTestId } = render(
+      <Field dataTestId="field" label={labelText}>
+        <Input />
+      </Field>
+    )
+
+    const field = getByTestId('field')
+    expect(field).toBeInTheDocument()
+    expect(field.childNodes[0].nodeName.toLowerCase()).toBe('label')
+    expect(field.childNodes[1].nodeName.toLowerCase()).toBe('input')
+  })
+
+  it('should display checkable input inside label', () => {
+    const { getByTestId } = render(
+      <Field dataTestId="field" label={labelText}>
+        <Input type="checkbox" />
+      </Field>
+    )
+
+    const field = getByTestId('field')
+    expect(field).toBeInTheDocument()
+    const container = field.childNodes[0]
+
+    expect(container.childNodes[0].nodeName.toLowerCase()).toBe('label')
+    expect(container.childNodes[0].childNodes[0].nodeName.toLowerCase()).toBe('input')
+  })
+
+  it('should focus input when click on label when using id on input', async () => {
+    const { getByTestId } = render(
+      <Field dataTestId="field" label={labelText}>
+        <Input id="field" />
+      </Field>
+    )
+
+    const field = getByTestId('field')
+    const label = field.querySelector('label')
+    const input = field.querySelector('input')
+
+    expect(label.htmlFor).toBe('field')
+    expect(label.htmlFor).toBe(input.id)
+    userEvent.click(label)
+    expect(input).toHaveFocus()
+    expect(document.activeElement).toBe(input)
+  })
+
+  it('should focus input when click on label when using name on input (the fallback value of the id is the name prop)', async () => {
+    const { getByTestId } = render(
+      <Field dataTestId="field" label={labelText}>
+        <Input name="field" />
+      </Field>
+    )
+
+    const field = getByTestId('field')
+    const label = field.querySelector('label')
+    const input = field.querySelector('input')
+
+    expect(label.htmlFor).toBe('field')
+    expect(label.htmlFor).toBe(input.id)
+    userEvent.click(label)
+    expect(input).toHaveFocus()
+    expect(document.activeElement).toBe(input)
+  })
+
+  it('should focus input when click on label when using neither name nor id on input (the fallback value of the id is created randomly)', async () => {
+    const { getByTestId } = render(
+      <Field dataTestId="field" label={labelText}>
+        <Input />
+      </Field>
+    )
+
+    const field = getByTestId('field')
+    const label = field.querySelector('label')
+    const input = field.querySelector('input')
+
+    expect(label.htmlFor).toContain('wui-field-')
+    expect(label.htmlFor).toBe(input.id)
+    userEvent.click(label)
+    expect(input).toHaveFocus()
+    expect(document.activeElement).toBe(input)
+  })
+})
diff --git a/packages/Field/index.tsx b/packages/Field/index.tsx
index cc769719dd..8cbebed664 100644
--- a/packages/Field/index.tsx
+++ b/packages/Field/index.tsx
@@ -1,167 +1,78 @@
 import React, { Fragment } from 'react'
 import { Label } from '@welcome-ui/label'
 import { Hint } from '@welcome-ui/hint'
-import SimpleMDEEditor from 'react-simplemde-editor'
-import { CreateWuiProps, forwardFieldRef } from '@welcome-ui/system'
+import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
 
 // Fields
 import { RowContainer } from './layout'
 import * as S from './styles'
-import { getBaseType, getVariant, VariantReturn } from './utils'
+import { generateRandomId, getBaseType, getVariant } from './utils'
 
-export type Size = 'sm' | 'md' | 'lg'
-
-export interface FieldOptions {
-  checked?: boolean
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  component: React.ComponentType<any>
-  connected?: boolean
+type FieldOptions = {
+  children: JSX.Element
   disabled?: boolean
   disabledIcon?: JSX.Element
   error?: string | JSX.Element
-  hint?: string
-  id?: string
   label?: string
-  modified?: boolean
-  name?: string
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
-  onClick?: (event: React.MouseEvent<HTMLInputElement>) => void
-  size?: Size
-  touched?: boolean
-  type?: string
-  warning?: string
+  hint?: string
   required?: boolean
-  variant?: VariantReturn
+  warning?: string | JSX.Element
 }
 
-export type FieldProps = CreateWuiProps<'input', FieldOptions>
+type FieldProps = CreateWuiProps<'div', FieldOptions>
 
-export const Field = forwardFieldRef<'input', FieldProps>(
+export const Field = forwardRef<'div', FieldProps>(
   (
     {
-      checked,
       children,
-      component: Component,
-      connected,
       dataTestId,
       disabled,
       disabledIcon,
       error,
       flexDirection,
       hint,
-      id,
       label,
-      modified,
-      name,
-      onChange,
-      onClick,
       required,
-      size = 'lg',
-      touched,
-      type,
       warning,
       ...rest
     },
     ref
   ) => {
-    // Return early if no component
-    if (!Component) {
-      return null
-    }
-
-    const baseType = getBaseType(type || Component.displayName)
+    const baseType = getBaseType(children.props.type || children.type.displayName)
     const isRadio = baseType === 'radio'
-    const isToggle = Component.displayName === 'Toggle'
+    const isToggle = children.type.displayName === 'Toggle'
     const isCheckbox = baseType === 'checkbox'
     const isCheckable = isRadio || isCheckbox
-    const variant = getVariant({
-      warning,
-      error,
-      modified,
-      isCheckbox,
-      isRadio,
-      touched,
-      connected,
-    })
-    const hintText = variant ? error || warning : hint
-    const isGroup = ['FieldGroup', 'RadioGroup'].includes(baseType)
-
-    const isShowRequired = isRadio ? null : required
     const layout = flexDirection || (isCheckable ? 'row' : 'column')
-    const Container = flexDirection === 'row' ? RowContainer : Fragment
-    const uniqueId = isRadio ? id : id || name
-    const inputRef = ref || React.createRef()
-
-    const handleClick = (e: React.MouseEvent<HTMLInputElement>) => {
-      const target = e.target as HTMLInputElement
-      e.stopPropagation()
-      onClick && onClick(e)
-      if (isCheckbox) {
-        target.checked = !target.checked
-      }
-      if (isCheckbox || isGroup) {
-        onChange && onChange(e as unknown as React.ChangeEvent<HTMLInputElement>)
-      }
-    }
-
-    const handleLabelClick = () => {
-      const input = (inputRef as React.MutableRefObject<unknown>).current
-      if (input) {
-        Component.displayName === 'MarkdownEditor'
-          ? (input as SimpleMDEEditor).simpleMde.codemirror.focus()
-          : (input as HTMLInputElement).focus()
-      }
-    }
+    const Container = layout === 'row' ? RowContainer : Fragment
+    const variant = getVariant({ error, warning })
+    const hintText = variant ? error || warning : hint
+    const htmlFor = children.props.id || children.props.name || generateRandomId()
 
-    const Field = (
-      <Component
-        checked={checked}
-        connected
-        dataTestId={dataTestId}
-        disabled={disabled}
-        flexDirection={layout}
-        id={uniqueId}
-        label={label}
-        name={name}
-        onChange={onChange}
-        onClick={handleClick}
-        ref={inputRef}
-        required={required}
-        size={size}
-        type={baseType}
-        variant={variant}
-        {...rest}
-      >
-        {children}
-      </Component>
-    )
+    const child = React.cloneElement(React.Children.only(children), {
+      disabled,
+      id: htmlFor,
+      required,
+      variant,
+    })
 
     return (
-      <S.Field
-        checkableField={isCheckable}
-        checked={checked}
-        flexDirection={layout}
-        size={size}
-        {...rest}
-      >
+      <S.Field ref={ref} {...rest} data-testid={dataTestId} flexDirection={layout}>
         <Container>
-          {label && !isGroup && (
+          {label && (
             <Label
-              checkableField={isCheckable}
               disabled={disabled}
               disabledIcon={disabledIcon}
-              htmlFor={isCheckable ? null : uniqueId}
-              onClick={handleLabelClick}
-              required={isShowRequired}
+              htmlFor={htmlFor}
+              required={required}
               variant={variant}
               withDisabledIcon={!isToggle}
             >
-              {isCheckable && <S.Input>{Field}</S.Input>}
-              <S.Content>{label}</S.Content>
+              {isCheckable && child}
+              {label}
             </Label>
           )}
-          {!isCheckable && Field}
-          {!label && isCheckable && Field}
+          {!isCheckable && child}
         </Container>
         {hintText && (
           <Hint checkableField={isCheckable} variant={variant}>
diff --git a/packages/Field/package.json b/packages/Field/package.json
index d1ce5e2c84..bd0d003f53 100644
--- a/packages/Field/package.json
+++ b/packages/Field/package.json
@@ -37,11 +37,9 @@
     "url": "https://github.com/WTTJ/welcome-ui/issues"
   },
   "dependencies": {
-    "@welcome-ui/field-group": "^4.0.0-alpha.12",
     "@welcome-ui/hint": "^4.0.0-alpha.12",
     "@welcome-ui/label": "^4.0.0-alpha.12",
-    "@welcome-ui/system": "^4.0.0-alpha.11",
-    "polished": "^3.4.1"
+    "@welcome-ui/system": "^4.0.0-alpha.11"
   },
   "peerDependencies": {
     "@xstyled/styled-components": "^3.0.1",
diff --git a/packages/Field/styles.ts b/packages/Field/styles.ts
index f07b6d52da..7332f8cdaa 100644
--- a/packages/Field/styles.ts
+++ b/packages/Field/styles.ts
@@ -2,10 +2,8 @@ import styled, { css } from '@xstyled/styled-components'
 import { th } from '@xstyled/system'
 import { StyledLabel } from '@welcome-ui/label'
 import { StyledFieldGroup } from '@welcome-ui/field-group'
-import { shouldForwardProp, system, wrapperSystem } from '@welcome-ui/system'
-import { WuiProps } from '@welcome-ui/system'
-
-import { Size } from './index'
+import { shouldForwardProp, system, WuiProps } from '@welcome-ui/system'
+import { DefaultFieldStylesProps } from '@welcome-ui/utils'
 
 const rowStyles = css`
   margin-right: sm;
@@ -24,7 +22,6 @@ type StyledFieldProps = {
   checkableField: boolean
   flexDirection: WuiProps['flexDirection']
   checked: boolean
-  size: Size
 }
 
 export const Field = styled('div').withConfig({ shouldForwardProp })<StyledFieldProps>(
@@ -38,13 +35,13 @@ export const Field = styled('div').withConfig({ shouldForwardProp })<StyledField
       ${checkableField && checkableFieldStyles};
       ${checked && th('defaultFields.checkablelabel.checked')}
     }
-    ${wrapperSystem};
+    ${system};
   `
 )
 
 type IconWrapperProps = {
   iconPlacement: 'left' | 'right'
-  size: Size
+  size: DefaultFieldStylesProps['size']
 }
 
 export const IconWrapper = styled.div<IconWrapperProps>(
@@ -62,16 +59,9 @@ export const IconWrapper = styled.div<IconWrapperProps>(
     transition: medium;
     transition-timing-function: primary;
     ${system};
-
     /* for button action */
     & > button {
       pointer-events: auto;
     }
   `
 )
-
-export const Input = styled.div`
-  flex-shrink: 0;
-`
-
-export const Content = styled.div``
diff --git a/packages/Field/utils.ts b/packages/Field/utils.ts
index 544bfdc632..dcebbdc51b 100644
--- a/packages/Field/utils.ts
+++ b/packages/Field/utils.ts
@@ -7,43 +7,19 @@ const TYPES: { [key: string]: string } = {
   Toggle: 'checkbox',
 }
 
-const isPristine = (connected: boolean, touched: boolean) => connected && !touched
-
 export const getBaseType = (type: string): string => TYPES[type] || type
 
 type VariantProps = {
-  connected?: boolean
   error?: string | JSX.Element
-  isCheckbox: boolean
-  isRadio: boolean
-  modified?: boolean
-  touched?: boolean
-  warning?: string
+  warning?: string | JSX.Element
 }
 
-export type VariantReturn = 'error' | 'warning' | undefined
-
-export const getVariant = ({
-  connected,
-  error,
-  isCheckbox,
-  isRadio,
-  modified,
-  touched,
-  warning,
-}: VariantProps): VariantReturn => {
-  if (
-    ((isCheckbox || isRadio) && isPristine(connected, modified)) ||
-    (!isCheckbox && !isRadio && isPristine(connected, touched))
-  ) {
-    return undefined
-  }
-  if (error) {
-    return 'error'
-  }
-  if (warning) {
-    return 'warning'
-  }
+export type VariantReturn = 'error' | 'warning'
 
+export const getVariant = ({ error, warning }: VariantProps): VariantReturn => {
+  if (error) return 'error'
+  if (warning) return 'warning'
   return undefined
 }
+
+export const generateRandomId = (): string => `wui-field-${Math.random().toString(36).slice(2)}`
diff --git a/packages/FileDrop/index.tsx b/packages/FileDrop/index.tsx
index 72422d432e..7ed17387b4 100644
--- a/packages/FileDrop/index.tsx
+++ b/packages/FileDrop/index.tsx
@@ -175,7 +175,7 @@ export const FileDrop = forwardRef<'div', FileDropProps>(
         <input
           {...getInputProps({ disabled, multiple, name, onError: inputPropsOnError })}
           // for extern validator we need to have access to this input
-          style={{ display: 'block', opacity: 0, height: 0 }}
+          style={{ display: 'block', opacity: 0, height: 0, width: 0 }}
         />
         <S.FilePreview>
           {children({
diff --git a/packages/FileUpload/index.tsx b/packages/FileUpload/index.tsx
index f9ebeca82e..063223ad75 100644
--- a/packages/FileUpload/index.tsx
+++ b/packages/FileUpload/index.tsx
@@ -70,7 +70,6 @@ export const FileUpload = forwardRef<'input', FileUploadProps>(
   ) => {
     // We always keep an array of files
     const [files, setFiles] = useState<FileWithPreviewType[]>(ensureArray(value))
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const inputRef = useRef<HTMLInputElement>()
 
     // Ensure component is controlled
@@ -150,7 +149,7 @@ export const FileUpload = forwardRef<'input', FileUploadProps>(
             // for external use
             if (typeof ref === 'function') {
               ref(instance)
-            } else {
+            } else if (ref?.current) {
               ref.current = instance
             }
           }}
diff --git a/packages/Hint/index.tsx b/packages/Hint/index.tsx
index 01941fb21e..bfc440ba29 100644
--- a/packages/Hint/index.tsx
+++ b/packages/Hint/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
-import { Variant, VariantIcon } from '@welcome-ui/variant-icon'
+import { VariantIcon } from '@welcome-ui/variant-icon'
 import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
+import { Variant } from '@welcome-ui/utils'
 
 import * as S from './styles'
 
diff --git a/packages/InputText/index.test.js b/packages/InputText/index.test.js
deleted file mode 100644
index 597a30e51e..0000000000
--- a/packages/InputText/index.test.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from 'react'
-import { fireEvent } from '@testing-library/react'
-
-import { Form, getFormValues } from '../../utils/Form'
-import { render } from '../../utils/tests'
-import { ConnectedField } from '../ConnectedField'
-
-import { InputText } from './index'
-
-test('<InputText> displays given value', () => {
-  const { getByTestId } = render(
-    <Form initialValues={{ input: 'test' }}>
-      <ConnectedField component={InputText} dataTestId="input" label="Input" name="input" />
-    </Form>
-  )
-
-  const input = getByTestId('input')
-  const formValues = getFormValues(getByTestId('values'))
-
-  expect(input.value).toBe('test')
-  expect(formValues.input).toStrictEqual('test')
-})
-
-test("<InputText> can't remove value", () => {
-  const { getByTestId, queryByRole } = render(
-    <Form initialValues={{ input: 'test' }}>
-      <ConnectedField component={InputText} dataTestId="input" label="Input" name="input" />
-    </Form>
-  )
-
-  const input = getByTestId('input')
-  const formValues = getFormValues(getByTestId('values'))
-
-  // Use `queryByTitle` to expect no close button
-  const clearButton = queryByRole('button')
-  expect(clearButton).toBeNull()
-
-  expect(input.value).toBe('test')
-  expect(formValues.input).toStrictEqual('test')
-})
-
-test('<InputText isClearable> can remove value', () => {
-  const { getByRole, getByTestId } = render(
-    <Form initialValues={{ input: 'test' }}>
-      <ConnectedField
-        component={InputText}
-        dataTestId="input"
-        isClearable
-        label="Input"
-        name="input"
-      />
-    </Form>
-  )
-
-  let input = getByTestId('input')
-  let formValues = getFormValues(getByTestId('values'))
-
-  expect(input.value).toBe('test')
-  expect(formValues.input).toStrictEqual('test')
-
-  const clearButton = getByRole('button')
-  fireEvent.click(clearButton)
-
-  formValues = getFormValues(getByTestId('values'))
-  expect(input.value).toBe('')
-  expect(formValues.input).toBe(undefined)
-})
diff --git a/packages/InputText/index.test.tsx b/packages/InputText/index.test.tsx
new file mode 100644
index 0000000000..bbd861ed2f
--- /dev/null
+++ b/packages/InputText/index.test.tsx
@@ -0,0 +1,48 @@
+import React, { useState } from 'react'
+import { fireEvent } from '@testing-library/react'
+
+import { render } from '../../utils/tests'
+
+import { InputText, InputTextOptions } from './index'
+
+const InputTextWrapper: React.FC<InputTextOptions> = props => {
+  const [value, setValue] = useState('test')
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value)
+  }
+
+  return (
+    <InputText dataTestId="input" name="input" onChange={handleChange} value={value} {...props} />
+  )
+}
+
+test('<InputText> displays given value', () => {
+  const { getByTestId } = render(<InputTextWrapper />)
+
+  const input = getByTestId('input') as HTMLInputElement
+  expect(input.value).toBe('test')
+})
+
+test("<InputText> can't remove value", () => {
+  const { getByTestId, queryByRole } = render(<InputTextWrapper />)
+
+  const input = getByTestId('input') as HTMLInputElement
+
+  // Use `queryByTitle` to expect no close button
+  const clearButton = queryByRole('button')
+  expect(clearButton).toBeNull()
+
+  expect(input.value).toBe('test')
+})
+
+test('<InputText isClearable> can remove value', () => {
+  const { getByRole, getByTestId } = render(<InputTextWrapper isClearable />)
+
+  const input = getByTestId('input') as HTMLInputElement
+  expect(input.value).toBe('test')
+
+  const clearButton = getByRole('button')
+  fireEvent.click(clearButton)
+  expect(input.value).toBe('')
+})
diff --git a/packages/InputText/index.tsx b/packages/InputText/index.tsx
index 89af1e6bcc..84ee7866a7 100644
--- a/packages/InputText/index.tsx
+++ b/packages/InputText/index.tsx
@@ -1,16 +1,13 @@
 import React from 'react'
 import { IconWrapper } from '@welcome-ui/field'
 import { ClearButton } from '@welcome-ui/clear-button'
-import { createEvent, Variant } from '@welcome-ui/utils'
+import { createEvent, DefaultFieldStylesProps } from '@welcome-ui/utils'
 import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
 
 import * as S from './styles'
 
-type Size = 'sm' | 'md' | 'lg'
-
-export interface InputTextOptions {
+export type InputTextOptions = {
   autoFocus?: boolean
-  connected?: boolean
   disabled?: boolean
   icon?: JSX.Element
   iconPlacement?: 'left' | 'right'
@@ -21,11 +18,9 @@ export interface InputTextOptions {
   onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void
   onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void
   placeholder?: string
-  size?: Size
   type?: string
   value?: string
-  variant?: Variant
-}
+} & DefaultFieldStylesProps
 
 export type InputTextProps = CreateWuiProps<'input', InputTextOptions>
 
@@ -33,7 +28,6 @@ export const InputText = forwardRef<'input', InputTextProps>(
   (
     {
       autoFocus,
-      connected,
       dataTestId,
       disabled,
       icon,
@@ -65,7 +59,6 @@ export const InputText = forwardRef<'input', InputTextProps>(
       <S.Wrapper>
         <S.InputText
           autoFocus={autoFocus}
-          connected={connected}
           data-testid={dataTestId}
           disabled={disabled}
           icon={!!icon}
diff --git a/packages/InputText/styles.ts b/packages/InputText/styles.ts
index d43e6444d3..6058b4704f 100644
--- a/packages/InputText/styles.ts
+++ b/packages/InputText/styles.ts
@@ -1,12 +1,12 @@
 import styled, { css } from '@xstyled/styled-components'
 import { th } from '@xstyled/system'
-import { componentSystem, shouldForwardProp, system } from '@welcome-ui/system'
+import { shouldForwardProp, system } from '@welcome-ui/system'
 import { defaultFieldStyles } from '@welcome-ui/utils'
 
 import { InputTextOptions } from './index'
 
 export const InputText = styled('input').withConfig({ shouldForwardProp })<InputTextOptions>(
-  ({ connected, icon, iconPlacement, isClearable, size, variant }) => css`
+  ({ icon, iconPlacement, isClearable, size, variant }) => css`
     ${defaultFieldStyles({ size, variant })};
     text-overflow: ellipsis;
 
@@ -28,7 +28,7 @@ export const InputText = styled('input').withConfig({ shouldForwardProp })<Input
       padding-right: ${th(`defaultFields.sizes.${size}.height`)};
     `};
 
-    ${connected ? componentSystem : system};
+    ${system};
   `
 )
 
diff --git a/packages/Label/index.tsx b/packages/Label/index.tsx
index 464e33b079..2e8b0212c9 100644
--- a/packages/Label/index.tsx
+++ b/packages/Label/index.tsx
@@ -1,13 +1,11 @@
 import React from 'react'
 import { LockIcon } from '@welcome-ui/icons.lock'
 import { VariantIcon } from '@welcome-ui/variant-icon'
-import { wrapChildren } from '@welcome-ui/utils'
+import { Variant, wrapChildren } from '@welcome-ui/utils'
 import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
 
 import * as S from './styles'
 
-export type Variant = 'error' | 'warning' | 'info' | 'success'
-
 export interface LabelOptions {
   checkableField?: boolean
   disabled?: boolean
diff --git a/packages/MarkdownEditor/index.tsx b/packages/MarkdownEditor/index.tsx
index b6cffe9d84..1ee24036b5 100644
--- a/packages/MarkdownEditor/index.tsx
+++ b/packages/MarkdownEditor/index.tsx
@@ -9,7 +9,7 @@ import { CodeIcon } from '@welcome-ui/icons.code'
 import { QuoteIcon } from '@welcome-ui/icons.quote'
 import { UnorderedListIcon } from '@welcome-ui/icons.unordered_list'
 import { OrderedListIcon } from '@welcome-ui/icons.ordered_list'
-import { createEvent, CreateEvent } from '@welcome-ui/utils'
+import { createEvent, CreateEvent, DefaultFieldStylesProps } from '@welcome-ui/utils'
 import SimpleMDE, { SimpleMDEEditorProps } from 'react-simplemde-editor'
 import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
 import { BaseEmoji } from 'emoji-mart'
@@ -27,7 +27,7 @@ interface Actions {
   [key: string]: Action
 }
 export type Variant = 'error' | 'info' | 'success' | 'valid' | 'warning'
-export interface MarkdownEditorOptions {
+export type MarkdownEditorOptions = {
   actions?: React.ReactElement
   autoFocus?: SimpleMDEEditorProps['options']['autofocus']
   disabled?: boolean
@@ -39,8 +39,7 @@ export interface MarkdownEditorOptions {
   placeholder: SimpleMDEEditorProps['options']['placeholder']
   toolbar?: DefaultToolbar
   value: string | null
-  variant?: Variant
-}
+} & DefaultFieldStylesProps
 
 export type MarkdownEditorProps = CreateWuiProps<
   'div',
diff --git a/packages/MarkdownEditor/styles.ts b/packages/MarkdownEditor/styles.ts
index 3afa7b59b2..18b0515ec5 100644
--- a/packages/MarkdownEditor/styles.ts
+++ b/packages/MarkdownEditor/styles.ts
@@ -1,25 +1,23 @@
 import styled, { css } from '@xstyled/styled-components'
 import { th } from '@xstyled/system'
-import { componentSystem, shouldForwardProp, system } from '@welcome-ui/system'
+import { shouldForwardProp, system } from '@welcome-ui/system'
 import { defaultFieldStyles } from '@welcome-ui/utils'
 
 import { emojiMartStyles } from './emojiMartStyles'
 import { easyMdeStyles } from './easyMdeStyles'
 
-interface WrapperOptions {
-  connected?: boolean
-  disabled?: boolean
-  focused?: boolean
-}
+import { MarkdownEditorOptions } from './index'
 
 interface ToolbarIconOptions {
   active?: boolean
 }
 
-export const Wrapper = styled('div').withConfig({ shouldForwardProp })<WrapperOptions>(
-  ({ connected, disabled, focused }) => css`
+export const Wrapper = styled('div').withConfig({ shouldForwardProp })<
+  { focused: boolean } & MarkdownEditorOptions
+>(
+  ({ disabled, focused, size, variant }) => css`
     ${easyMdeStyles};
-    ${defaultFieldStyles({})};
+    ${defaultFieldStyles({ size, variant })};
     position: relative;
     pointer-events: ${disabled && 'none'};
     ${focused && th('defaultFields.focused.default')};
@@ -42,7 +40,7 @@ export const Wrapper = styled('div').withConfig({ shouldForwardProp })<WrapperOp
     .cm-strong {
       font-weight: bold;
     }
-    ${connected ? componentSystem : system};
+    ${system};
   `
 )
 
diff --git a/packages/PasswordInput/index.test.js b/packages/PasswordInput/index.test.js
deleted file mode 100644
index ff5ef36864..0000000000
--- a/packages/PasswordInput/index.test.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react'
-import { fireEvent } from '@testing-library/react'
-
-import { render } from '../../utils/tests'
-import { ConnectedField } from '../ConnectedField'
-import { Form, getFormValues } from '../../utils/Form'
-
-import { PasswordInput } from './index'
-
-describe('<PasswordInput>', () => {
-  test('should display given value', () => {
-    const { getByTestId } = render(
-      <Form initialValues={{ input: 'test' }}>
-        <ConnectedField component={PasswordInput} dataTestId="input" label="Input" name="input" />
-      </Form>
-    )
-
-    const input = getByTestId('input')
-    const formValues = getFormValues(getByTestId('values'))
-
-    expect(input.value).toBe('test')
-    expect(formValues.input).toStrictEqual('test')
-  })
-
-  test('should have password attribute', () => {
-    const { getByTestId } = render(
-      <Form initialValues={{ input: 'test' }}>
-        <ConnectedField component={PasswordInput} dataTestId="input" label="Input" name="input" />
-      </Form>
-    )
-
-    const input = getByTestId('input')
-    const button = getByTestId('input-action')
-
-    expect(button).toHaveAttribute('aria-expanded', 'false')
-    expect(input).toHaveAttribute('type', 'password')
-  })
-
-  test('should have text attribute', () => {
-    const { getByTestId } = render(
-      <Form initialValues={{ input: 'test' }}>
-        <ConnectedField component={PasswordInput} dataTestId="input" label="Input" name="input" />
-      </Form>
-    )
-
-    const input = getByTestId('input')
-    const button = getByTestId('input-action')
-
-    fireEvent.click(button)
-
-    expect(button).toHaveAttribute('aria-expanded', 'true')
-    expect(input).toHaveAttribute('type', 'text')
-  })
-})
diff --git a/packages/PasswordInput/index.test.tsx b/packages/PasswordInput/index.test.tsx
new file mode 100644
index 0000000000..9cf2749a59
--- /dev/null
+++ b/packages/PasswordInput/index.test.tsx
@@ -0,0 +1,55 @@
+import React, { useState } from 'react'
+import { fireEvent } from '@testing-library/react'
+
+import { render } from '../../utils/tests'
+
+import { PasswordInput, PasswordInputOptions } from './index'
+
+const PasswordInputWrapper: React.FC<PasswordInputOptions> = props => {
+  const [value, setValue] = useState('test')
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value)
+  }
+
+  return (
+    <PasswordInput
+      dataTestId="input"
+      name="input"
+      onChange={handleChange}
+      value={value}
+      {...props}
+    />
+  )
+}
+
+describe('<PasswordInput>', () => {
+  test('should display given value', () => {
+    const { getByTestId } = render(<PasswordInputWrapper />)
+
+    const input = getByTestId('input') as HTMLInputElement
+    expect(input.value).toBe('test')
+  })
+
+  test('should have password attribute', () => {
+    const { getByTestId } = render(<PasswordInputWrapper />)
+
+    const input = getByTestId('input')
+    const button = getByTestId('input-action')
+
+    expect(button).toHaveAttribute('aria-expanded', 'false')
+    expect(input).toHaveAttribute('type', 'password')
+  })
+
+  test('should have text attribute', () => {
+    const { getByTestId } = render(<PasswordInputWrapper />)
+
+    const input = getByTestId('input')
+    const button = getByTestId('input-action')
+
+    fireEvent.click(button)
+
+    expect(button).toHaveAttribute('aria-expanded', 'true')
+    expect(input).toHaveAttribute('type', 'text')
+  })
+})
diff --git a/packages/PasswordInput/index.tsx b/packages/PasswordInput/index.tsx
index 86ddfcb794..1b22f48106 100644
--- a/packages/PasswordInput/index.tsx
+++ b/packages/PasswordInput/index.tsx
@@ -4,6 +4,7 @@ import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
 
 import { ToggleButton } from './ToggleButton'
 
+export type PasswordInputOptions = InputTextOptions
 export type PasswordInputProps = CreateWuiProps<'input', InputTextOptions>
 
 export const PasswordInput = forwardRef<'input', PasswordInputProps>(
diff --git a/packages/Picker/index.test.tsx b/packages/Picker/index.test.tsx
index 89a926f83a..75b634a1f7 100644
--- a/packages/Picker/index.test.tsx
+++ b/packages/Picker/index.test.tsx
@@ -1,50 +1,38 @@
 import React from 'react'
 
-import { Form, getFormValues } from '../../utils/Form'
 import { render } from '../../utils/tests'
-import { ConnectedField } from '../ConnectedField'
 
 import { Picker } from './index'
 
-test('<Picker> renders', () => {
-  const { getByTestId } = render(
-    <Form initialValues={{ value: 'foo' }}>
-      <ConnectedField
-        component={Picker}
-        label="Values"
-        name="value"
-        options={[
-          { element: () => 'foo', value: 'foo' },
-          { element: () => 'bar', value: 'bar' },
-          { element: () => 'baz', value: 'baz' },
-        ]}
-        required
-      />
-    </Form>
-  )
-
-  const formValues = getFormValues(getByTestId('values'))
+const PickerOptionElement: React.FC<{ selected: boolean; value: string }> = ({
+  selected,
+  value,
+}) => <div data-selected={selected}>{value}</div>
 
-  expect(formValues.value).toStrictEqual('foo')
-})
-
-test('<Picker> selected prop is passed to elements', () => {
-  const { getByText } = render(
-    <Form initialValues={{ value: 'foo' }}>
-      <ConnectedField
-        component={Picker}
-        label="Values"
-        name="value"
-        options={[
-          { element: ({ selected }) => (selected ? 'foo-selected' : 'foo'), value: 'foo' },
-          { element: () => 'bar', value: 'bar' },
-          { element: () => 'baz', value: 'baz' },
-        ]}
-        required
-      />
-    </Form>
+test('<Picker> renders', () => {
+  const { container } = render(
+    <Picker
+      dataTestId="picker"
+      name="value"
+      options={[
+        {
+          element: props => <PickerOptionElement {...props} value="foo" />,
+          value: 'foo',
+        },
+        {
+          element: props => <PickerOptionElement {...props} value="bar" />,
+          value: 'bar',
+        },
+        {
+          element: props => <PickerOptionElement {...props} value="baz" />,
+          value: 'baz',
+        },
+      ]}
+      required
+      value="bar"
+    />
   )
 
-  const selectedNode = getByText('foo-selected')
-  expect(selectedNode).toHaveTextContent('foo-selected')
+  const selectedItem = container.querySelector('div[data-selected="true"]')
+  expect(selectedItem.textContent).toBe('bar')
 })
diff --git a/packages/Picker/index.tsx b/packages/Picker/index.tsx
index 19d34095d6..1f79d53c0f 100644
--- a/packages/Picker/index.tsx
+++ b/packages/Picker/index.tsx
@@ -8,22 +8,24 @@ import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
 import * as S from './styles'
 
 export interface PickerOption {
-  element: React.JSXElementConstructor<{ selected: boolean }>
+  element: React.ComponentType<{ selected: boolean }>
   value: string
 }
 
 export interface PickerOptions {
-  connected: boolean
-  name: string
-  onChange: React.MouseEventHandler<HTMLLabelElement>
-  options: PickerOption[]
-  value: string
+  name?: string
+  onChange?: React.MouseEventHandler<HTMLLabelElement>
+  options?: PickerOption[]
+  value?: string
 }
 
-export type PickerProps = CreateWuiProps<'fieldset', FieldGroupOptions & PickerOptions>
+export type PickerProps = CreateWuiProps<
+  'fieldset',
+  Omit<FieldGroupOptions, 'children'> & PickerOptions
+>
 
 export const Picker = forwardRef<'fieldset', PickerProps>(
-  ({ connected, dataTestId, label, name, onChange, options, required, value, ...rest }, ref) => {
+  ({ dataTestId, label, name, onChange, options, required, value, ...rest }, ref) => {
     const handleClick: React.MouseEventHandler<HTMLLabelElement> = e => {
       e.stopPropagation()
       onChange && onChange(e)
@@ -46,7 +48,7 @@ export const Picker = forwardRef<'fieldset', PickerProps>(
               key={`${label}-${name}-${optValue}`}
               onClick={handleClick}
             >
-              <S.Radio connected={connected} name={name} value={optValue} />
+              <S.Radio name={name} value={optValue} />
               <Component selected={value === optValue} />
             </Label>
           ))}
diff --git a/packages/Picker/styles.ts b/packages/Picker/styles.ts
new file mode 100644
index 0000000000..01a85db5a6
--- /dev/null
+++ b/packages/Picker/styles.ts
@@ -0,0 +1,8 @@
+import styled from '@xstyled/styled-components'
+import { shouldForwardProp, system } from '@welcome-ui/system'
+import { Radio as ReakitRadio } from 'reakit/Radio'
+
+export const Radio = styled(ReakitRadio).withConfig({ shouldForwardProp })`
+  display: none;
+  ${system};
+`
diff --git a/packages/Picker/styles.tsx b/packages/Picker/styles.tsx
deleted file mode 100644
index f4d5431500..0000000000
--- a/packages/Picker/styles.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import styled, { css } from '@xstyled/styled-components'
-import { componentSystem, shouldForwardProp, system } from '@welcome-ui/system'
-import { Radio as ReakitRadio } from 'reakit/Radio'
-
-export const Radio = styled(ReakitRadio).withConfig({ shouldForwardProp })(
-  ({ connected }: { connected: boolean }) => css`
-    display: none;
-    ${connected ? componentSystem : system};
-  `
-)
diff --git a/packages/Radio/index.tsx b/packages/Radio/index.tsx
index 31e0258ff5..55f7aa3273 100644
--- a/packages/Radio/index.tsx
+++ b/packages/Radio/index.tsx
@@ -1,17 +1,16 @@
 import React from 'react'
 import { LabelOptions } from '@welcome-ui/label'
 import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
-import { Variant } from '@welcome-ui/utils'
+import { DefaultFieldStylesProps } from '@welcome-ui/utils'
 
 import * as S from './styles'
 
-export interface RadioOptions {
+export type RadioOptions = {
   hint?: string
-  label: string
+  label?: string
   onChange?: (event: React.MouseEvent<HTMLLabelElement>) => void
   onClick?: (event: React.MouseEvent<HTMLLabelElement>) => void
-  variant?: Variant
-}
+} & DefaultFieldStylesProps
 
 export type RadioProps = CreateWuiProps<'input', RadioOptions & LabelOptions>
 
diff --git a/packages/Radio/styles.ts b/packages/Radio/styles.ts
index 0b219ccf84..5a815b0020 100644
--- a/packages/Radio/styles.ts
+++ b/packages/Radio/styles.ts
@@ -1,18 +1,16 @@
 import styled, { css } from '@xstyled/styled-components'
 import { Box } from '@welcome-ui/box'
-import { componentSystem, shouldForwardProp, system } from '@welcome-ui/system'
-import { defaultFieldStyles, Variant } from '@welcome-ui/utils'
+import { shouldForwardProp, system } from '@welcome-ui/system'
+import { defaultFieldStyles } from '@welcome-ui/utils'
 import { Hint as HintWUI } from '@welcome-ui/hint'
 import { Label as WUILabel } from '@welcome-ui/label'
 import { Radio as ReakitRadio } from 'reakit/Radio'
 import { th } from '@xstyled/system'
 
-export const Radio = styled(ReakitRadio).withConfig({ shouldForwardProp })<{
-  connected?: boolean
-  order?: string
-  variant?: Variant
-}>(
-  ({ connected, order = '-1', size, theme, variant }) => css`
+import { RadioProps } from './index'
+
+export const Radio = styled(ReakitRadio).withConfig({ shouldForwardProp })<RadioProps>(
+  ({ order = '-1', size, theme, variant }) => css`
     ${defaultFieldStyles({ size, variant })};
     ${th('radios.default')}
     position: relative;
@@ -41,7 +39,7 @@ export const Radio = styled(ReakitRadio).withConfig({ shouldForwardProp })<{
       }
     }
 
-    ${connected ? componentSystem : system};
+    ${system};
   `
 )
 
diff --git a/packages/RadioTab/index.tsx b/packages/RadioTab/index.tsx
index a82314cd1c..c5eb08f790 100644
--- a/packages/RadioTab/index.tsx
+++ b/packages/RadioTab/index.tsx
@@ -1,26 +1,22 @@
 import React from 'react'
 import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
+import { DefaultFieldStylesProps } from '@welcome-ui/utils'
 import { RadioProps } from 'reakit/Radio'
 
 import * as S from './styles'
 
-export type Size = 'sm' | 'md' | 'lg'
-export type Variant = 'error' | 'warning' | 'info' | 'success'
-
-export interface RadioTabsOptions {
+export type RadioTabsOptions = {
   checked?: boolean
   disabled?: boolean
   disabledIcon?: React.ReactElement
   label: React.ReactElement
   onChange?: (event: React.MouseEvent<HTMLLabelElement>) => void
   onClick?: (event: React.MouseEvent<HTMLLabelElement>) => void
-  size?: Size
-  variant?: Variant
-}
+} & DefaultFieldStylesProps
 
 export type RadioTabsProps = CreateWuiProps<
   'input',
-  RadioTabsOptions & Omit<RadioProps, 'onChange' | 'onClick'>
+  RadioTabsOptions & Omit<RadioProps, keyof RadioTabsOptions>
 >
 
 export const RadioTab = forwardRef<'input', RadioTabsProps>((props, ref) => {
diff --git a/packages/RadioTab/styles.ts b/packages/RadioTab/styles.ts
index 1d25c5bc7f..fcbc812638 100644
--- a/packages/RadioTab/styles.ts
+++ b/packages/RadioTab/styles.ts
@@ -2,22 +2,16 @@ import styled, { css } from '@xstyled/styled-components'
 import { th } from '@xstyled/system'
 import { Radio as ReakitRadio } from 'reakit/Radio'
 import { componentSystem, shouldForwardProp, system } from '@welcome-ui/system'
-import { defaultFieldStyles, overflowEllipsis } from '@welcome-ui/utils'
+import { defaultFieldStyles, DefaultFieldStylesProps, overflowEllipsis } from '@welcome-ui/utils'
 import { WuiProps } from '@welcome-ui/system'
 
-import { Size, Variant } from './index'
-
-export const Radio = styled(ReakitRadio).withConfig({ shouldForwardProp })<{ connected?: boolean }>(
-  ({ connected }) => {
-    return css`
-      position: absolute;
-      top: 0;
-      left: 0;
-      visibility: hidden;
-      ${connected ? componentSystem : system};
-    `
-  }
-)
+export const Radio = styled(ReakitRadio).withConfig({ shouldForwardProp })`
+  position: absolute;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+  ${system};
+`
 
 const columnStyles = css`
   margin-top: -${th.borderWidth('sm')};
@@ -53,14 +47,14 @@ const rowStyles = css`
   }
 `
 
-export const Label = styled.label<{
-  checked?: boolean
-  flexDirection?: WuiProps['flexDirection']
-  size?: Size
-  disabled?: boolean
-  disabledIcon?: React.ReactElement
-  variant?: Variant
-}>(
+export const Label = styled.label<
+  {
+    checked?: boolean
+    flexDirection?: WuiProps['flexDirection']
+    disabled?: boolean
+    disabledIcon?: React.ReactElement
+  } & DefaultFieldStylesProps
+>(
   ({ checked, flexDirection, size, variant }) => css`
     ${th('radioTabs.default')};
     flex: 1;
diff --git a/packages/Search/index.test.js b/packages/Search/index.test.tsx
similarity index 62%
rename from packages/Search/index.test.js
rename to packages/Search/index.test.tsx
index 183651cdcf..1311afbeda 100644
--- a/packages/Search/index.test.js
+++ b/packages/Search/index.test.tsx
@@ -1,11 +1,9 @@
 import React from 'react'
 import { fireEvent, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { ConnectedField } from '@welcome-ui/connected-field'
 import { Icon } from '@welcome-ui/icon'
 import { Shape } from '@welcome-ui/shape'
 
-import { Form, getFormValues } from '../../utils/Form'
 import { render } from '../../utils/tests'
 
 import { Search } from './index'
@@ -38,10 +36,9 @@ export const opt_group_results = [
 
 const defaultProps = {
   itemToString: item => item.title,
-  // eslint-disable-next-line react/display-name
   renderItem: item => (
     <div style={{ display: 'flex', alignItems: 'center' }}>
-      <Shape mr="xs" size="sm" w="20px">
+      <Shape mr="xs" w="20px">
         <img src={item.poster} />
       </Shape>
       <span>{item.title}</span>
@@ -54,36 +51,15 @@ const defaultProps = {
 }
 
 test('<Search> has default attributes', () => {
-  const { container, getByTestId } = render(
-    <Form>
-      <ConnectedField
-        component={Search}
-        dataTestId="search"
-        label="Search"
-        name="search"
-        {...defaultProps}
-      />
-    </Form>
-  )
+  const { getByTestId } = render(<Search dataTestId="search" name="search" {...defaultProps} />)
   const search = getByTestId('search')
-  const label = container.querySelector('label')
-
-  expect(label).toHaveTextContent('Search')
   expect(search.getAttribute('placeholder')).toBe('Search…')
   expect(search).toHaveTextContent('')
 })
 
 test('<Search> shows options when searching', async () => {
   const { getByRole, getByTestId } = render(
-    <Form initialValues={{}}>
-      <ConnectedField
-        component={Search}
-        dataTestId="search"
-        label="Search"
-        name="search"
-        {...defaultProps}
-      />
-    </Form>
+    <Search dataTestId="search" name="search" {...defaultProps} />
   )
 
   const search = getByTestId('search')
@@ -96,42 +72,22 @@ test('<Search> shows options when searching', async () => {
 
 test('<Search> can choose option', async () => {
   const { getByRole, getByTestId } = render(
-    <Form initialValues={{}}>
-      <ConnectedField
-        component={Search}
-        dataTestId="search"
-        label="Search"
-        name="search"
-        {...defaultProps}
-      />
-    </Form>
+    <Search dataTestId="search" name="search" {...defaultProps} />
   )
 
-  const search = getByTestId('search')
+  const search = getByTestId('search') as HTMLInputElement
   userEvent.type(search, 'fish')
 
   const options = await waitFor(() => getByRole('listbox').querySelectorAll('li'))
   fireEvent.click(options[1])
 
   expect(search.value).toEqual(results[1].title)
-
-  const formValues = getFormValues(getByTestId('values'))
-  expect(formValues.search).toStrictEqual(results[1])
 })
 
 test('<Search> calls onChange with correct (object) values', async () => {
   const handleChange = jest.fn()
   const { getByRole, getByTestId } = render(
-    <Form initialValues={{}}>
-      <ConnectedField
-        component={Search}
-        dataTestId="search"
-        label="Search"
-        name="search"
-        {...defaultProps}
-        onChange={handleChange}
-      />
-    </Form>
+    <Search dataTestId="search" name="search" {...defaultProps} onChange={handleChange} />
   )
 
   const search = getByTestId('search')
@@ -151,15 +107,7 @@ test('<Search> calls onChange with correct (object) values', async () => {
 
 test('<Search> formats items', async () => {
   const { getByRole, getByTestId } = render(
-    <Form initialValues={{ search: 'february' }}>
-      <ConnectedField
-        component={Search}
-        dataTestId="search"
-        label="Search"
-        name="search"
-        {...defaultProps}
-      />
-    </Form>
+    <Search dataTestId="search" name="search" {...defaultProps} />
   )
 
   const search = getByTestId('search')
@@ -173,16 +121,13 @@ test('<Search> formats items', async () => {
 
 test.skip('<Search icon> shows icon', () => {
   const { container } = render(
-    <Form initialValues={{ search: 'february' }}>
-      <ConnectedField
-        component={Search}
-        dataTestId="search"
-        icon={<Icon color="light.100" name="avatar" />}
-        label="Search"
-        name="search"
-        {...defaultProps}
-      />
-    </Form>
+    <Search
+      dataTestId="search"
+      icon={<Icon color="light.100" name="avatar" />}
+      name="search"
+      value="february"
+      {...defaultProps}
+    />
   )
 
   const icon = container.querySelector('[title="avatar"]')
@@ -191,15 +136,7 @@ test.skip('<Search icon> shows icon', () => {
 
 test("<Search> doesn't show list if no results", () => {
   const { getByTestId, queryByRole } = render(
-    <Form initialValues={{}}>
-      <ConnectedField
-        component={Search}
-        dataTestId="search"
-        label="Search"
-        name="search"
-        {...defaultProps}
-      />
-    </Form>
+    <Search dataTestId="search" name="search" {...defaultProps} />
   )
 
   const search = getByTestId('search')
@@ -211,23 +148,19 @@ test("<Search> doesn't show list if no results", () => {
 
 test('<Search groupsEnabled> shows groups header', async () => {
   const { getAllByTestId, getByTestId } = render(
-    <Form initialValues={{}}>
-      <ConnectedField
-        component={Search}
-        dataTestId="select"
-        groupsEnabled
-        label="Social networks"
-        name="search"
-        renderGroupHeader={({ label, options }) => (
-          <div data-testid="group-header">
-            <h4>{label}</h4>
-            <span>{options.length}</span>
-          </div>
-        )}
-        {...defaultProps}
-        search={() => opt_group_results}
-      />
-    </Form>
+    <Search
+      dataTestId="select"
+      groupsEnabled
+      name="search"
+      renderGroupHeader={({ label, options }) => (
+        <div data-testid="group-header">
+          <h4>{label}</h4>
+          <span>{options.length}</span>
+        </div>
+      )}
+      {...defaultProps}
+      search={() => Promise.resolve(opt_group_results)}
+    />
   )
 
   const search = getByTestId('select')
@@ -239,22 +172,15 @@ test('<Search groupsEnabled> shows groups header', async () => {
 
   headers.forEach((header, i) => {
     expect(header.querySelector('h4')).toHaveTextContent(opt_group_results[i].label)
-    expect(header.querySelector('span')).toHaveTextContent(opt_group_results[i].options.length)
+    expect(header.querySelector('span')).toHaveTextContent(
+      opt_group_results[i].options.length.toString()
+    )
   })
 })
 
 test('<Search> shows options with minChars to 0', async () => {
   const { getByRole, getByTestId } = render(
-    <Form initialValues={{}}>
-      <ConnectedField
-        component={Search}
-        dataTestId="search"
-        label="Search"
-        minChars={0}
-        name="search"
-        {...defaultProps}
-      />
-    </Form>
+    <Search dataTestId="search" minChars={0} name="search" {...defaultProps} />
   )
 
   const search = getByTestId('search')
diff --git a/packages/Search/index.tsx b/packages/Search/index.tsx
index c088a8c98d..e1832aa0aa 100644
--- a/packages/Search/index.tsx
+++ b/packages/Search/index.tsx
@@ -2,7 +2,7 @@ import React, { Fragment, useCallback, useMemo, useState } from 'react'
 import Downshift, { DownshiftProps, GetRootPropsOptions } from 'downshift'
 import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
 import { ClearButton } from '@welcome-ui/clear-button'
-import { createEvent, throttle as handleThrottle } from '@welcome-ui/utils'
+import { createEvent, DefaultFieldStylesProps, throttle as handleThrottle } from '@welcome-ui/utils'
 
 import * as S from './styles'
 
@@ -12,7 +12,7 @@ export type Option = { label: string; value: string }
 export type OptionGroup = { label: string; options: Option[] }
 type Item = Option | OptionGroup | string | unknown
 
-export interface SearchOptions {
+export type SearchOptions = {
   groupsEnabled?: boolean
   icon?: React.ReactElement
   itemToString: (item: Item) => string
@@ -21,11 +21,9 @@ export interface SearchOptions {
   renderGroupHeader?: (result: OptionGroup) => React.ReactElement
   renderItem: (item: Item) => React.ReactElement | string
   search: (query: string) => Promise<unknown>
-  size?: 'sm' | 'md' | 'lg'
   throttle?: number
   value?: Item
-  variant?: 'error' | 'info' | 'success' | 'valid' | 'warning'
-}
+} & DefaultFieldStylesProps
 
 export type SearchProps = CreateWuiProps<
   'input',
diff --git a/packages/Search/styles.ts b/packages/Search/styles.ts
index 5be4b27ae4..985d14c45c 100644
--- a/packages/Search/styles.ts
+++ b/packages/Search/styles.ts
@@ -2,27 +2,23 @@ import styled, { css } from '@xstyled/styled-components'
 import { th } from '@xstyled/system'
 import { StyledIcon } from '@welcome-ui/icon'
 import { componentSystem, shouldForwardProp, wrapperSystem } from '@welcome-ui/system'
-import { centerContent, defaultFieldStyles, overflowEllipsis, Variant } from '@welcome-ui/utils'
+import { centerContent, defaultFieldStyles, overflowEllipsis } from '@welcome-ui/utils'
 import { cardStyles } from '@welcome-ui/utils'
 
 import { SearchOptions } from './index'
 
-export const Wrapper = styled('div').withConfig({ shouldForwardProp })<{ connected?: boolean }>(
-  ({ connected }) => css`
-    position: relative;
-    ${!connected && wrapperSystem};
-  `
-)
+export const Wrapper = styled('div').withConfig({ shouldForwardProp })`
+  position: relative;
+  ${wrapperSystem};
+`
 
 export const InputWrapper = styled.div`
   position: relative;
 `
 
-export const Input = styled('input').withConfig({ shouldForwardProp })<{
-  hasIcon?: boolean
-  size?: SearchOptions['size']
-  variant?: Variant
-}>(
+export const Input = styled('input').withConfig({ shouldForwardProp })<
+  { hasIcon?: boolean } & SearchOptions
+>(
   ({ hasIcon, size, variant }) => css`
     position: relative;
     ${defaultFieldStyles({ size, variant })};
diff --git a/packages/Select/index.test.tsx b/packages/Select/index.test.tsx
index 3676a234c6..05327038d3 100644
--- a/packages/Select/index.test.tsx
+++ b/packages/Select/index.test.tsx
@@ -2,14 +2,12 @@ import React from 'react'
 import { fireEvent } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import capitalize from 'lodash.capitalize'
-import { ConnectedField } from '@welcome-ui/connected-field'
 import { AvatarIcon } from '@welcome-ui/icons.avatar'
 import { DateIcon } from '@welcome-ui/icons.date'
 
-import { Form, getFormValues } from '../../utils/Form'
 import { render } from '../../utils/tests'
 
-import { Select } from './index'
+import { Option, Select } from './index'
 
 const MONTHS = [
   'january',
@@ -31,7 +29,7 @@ const MONTHS_WITH_INTEGER_VALUES = MONTHS.map((item, index) => ({
   value: index,
 }))
 
-export const SOCIAL_OPT_GROUP = [
+const SOCIAL_OPT_GROUP = [
   {
     label: 'Professional networks',
     options: [
@@ -51,15 +49,7 @@ export const SOCIAL_OPT_GROUP = [
 
 test('<Select> accepts falsy option values (such as 0)', () => {
   const { getByTestId } = render(
-    <Form initialValues={{ select: 0 }} validate={false}>
-      <ConnectedField
-        component={Select}
-        dataTestId="select"
-        label="Select"
-        name="select"
-        options={MONTHS_WITH_INTEGER_VALUES}
-      />
-    </Form>
+    <Select dataTestId="select" name="select" options={MONTHS_WITH_INTEGER_VALUES} value={0} />
   )
   const select = getByTestId('select')
 
@@ -67,21 +57,10 @@ test('<Select> accepts falsy option values (such as 0)', () => {
 })
 
 test('<Select> has default attributes', () => {
-  const { container, getByTestId } = render(
-    <Form initialValues={{ select: 'january' }} validate={false}>
-      <ConnectedField
-        component={Select}
-        dataTestId="select"
-        label="Select"
-        name="select"
-        options={MONTHS}
-      />
-    </Form>
+  const { getByTestId } = render(
+    <Select dataTestId="select" name="select" options={MONTHS} value="january" />
   )
   const select = getByTestId('select')
-  const label = container.querySelector('label')
-
-  expect(label).toHaveTextContent('Select')
   expect(select.getAttribute('placeholder')).toBe('Choose from…')
   expect(select.getAttribute('data-spacer')).toBe('September')
   expect(select).toHaveTextContent('January')
@@ -89,15 +68,7 @@ test('<Select> has default attributes', () => {
 
 test('<Select> shows options on click (input)', () => {
   const { getByRole, getByTestId } = render(
-    <Form initialValues={{}} validate={false}>
-      <ConnectedField
-        component={Select}
-        dataTestId="select"
-        label="Select"
-        name="select"
-        options={MONTHS}
-      />
-    </Form>
+    <Select dataTestId="select" name="select" options={MONTHS} />
   )
 
   const select = getByTestId('select')
@@ -110,15 +81,7 @@ test('<Select> shows options on click (input)', () => {
 
 test('<Select> shows options on click (arrow indicator)', () => {
   const { getByRole, getByTestId } = render(
-    <Form initialValues={{}} validate={false}>
-      <ConnectedField
-        component={Select}
-        dataTestId="select"
-        label="Select"
-        name="select"
-        options={MONTHS}
-      />
-    </Form>
+    <Select dataTestId="select" name="select" options={MONTHS} />
   )
 
   const select = getByTestId('select-arrow-icon')
@@ -129,17 +92,9 @@ test('<Select> shows options on click (arrow indicator)', () => {
   expect(options[0]).toHaveTextContent('January')
 })
 
-test('<Select> can choose option', () => {
+test.skip('<Select> can choose option', () => {
   const { getByRole, getByTestId } = render(
-    <Form initialValues={{}} validate={false}>
-      <ConnectedField
-        component={Select}
-        dataTestId="select"
-        label="Select"
-        name="select"
-        options={MONTHS}
-      />
-    </Form>
+    <Select dataTestId="select" name="select" options={MONTHS} />
   )
 
   const select = getByTestId('select')
@@ -147,10 +102,7 @@ test('<Select> can choose option', () => {
 
   let options = getByRole('listbox').querySelectorAll('li')
   fireEvent.click(options[1])
-
-  const formValues = getFormValues(getByTestId('values'))
   expect(select).toHaveTextContent('February')
-  expect(formValues.select).toStrictEqual('february')
 
   // List is refilled
   fireEvent.click(select)
@@ -162,16 +114,7 @@ test('<Select> can choose option', () => {
 test('<Select> calls onChange with correct (object) values', () => {
   const handleChange = jest.fn()
   const { getByRole, getByTestId } = render(
-    <Form initialValues={{}} validate={false}>
-      <ConnectedField
-        component={Select}
-        dataTestId="select"
-        label="Select"
-        name="select"
-        onChange={handleChange}
-        options={MONTHS}
-      />
-    </Form>
+    <Select dataTestId="select" name="select" onChange={handleChange} options={MONTHS} />
   )
 
   const select = getByTestId('select')
@@ -191,44 +134,27 @@ test('<Select> calls onChange with correct (object) values', () => {
 
 test('<Select isClearable> can remove option', () => {
   const { getByTestId, getByTitle } = render(
-    <Form initialValues={{ select: 'february' }} validate={false}>
-      <ConnectedField
-        component={Select}
-        dataTestId="select"
-        isClearable
-        label="Select"
-        name="select"
-        options={MONTHS}
-      />
-    </Form>
+    <Select dataTestId="select" isClearable name="select" options={MONTHS} value="february" />
   )
 
   const select = getByTestId('select')
-  let formValues = getFormValues(getByTestId('values'))
   expect(select).toHaveTextContent('February')
-  expect(formValues.select).toStrictEqual('february')
 
   // Click cross to remove selected option
   const clearButton = getByTitle('Clear')
   fireEvent.click(clearButton)
-
-  formValues = getFormValues(getByTestId('values'))
   expect(select).toHaveTextContent('')
-  expect(formValues.select).toBeUndefined()
 })
 
 test('<Select isMultiple> can select multiple items', () => {
   const { getAllByRole, getByRole, getByTestId } = render(
-    <Form initialValues={{ select: ['february', 'march'] }} validate={false}>
-      <ConnectedField
-        component={Select}
-        dataTestId="select"
-        isMultiple
-        label="Select"
-        name="select"
-        options={MONTHS}
-      />
-    </Form>
+    <Select
+      dataTestId="select"
+      isMultiple
+      name="select"
+      options={MONTHS}
+      value={['february', 'march']}
+    />
   )
 
   const select = getByTestId('select')
@@ -243,28 +169,19 @@ test('<Select isMultiple> can select multiple items', () => {
 
   tags = getAllByRole('listitem')
   expect(tags.length).toBe(3)
-
-  const formValues = getFormValues(getByTestId('values'))
   expect(select).toHaveTextContent('')
   expect(tags.map(tag => tag.textContent)).toStrictEqual(['February', 'March', 'April'])
-  expect(formValues.select).toStrictEqual(['february', 'march', 'april'])
 })
 
 test('<Select> can accept value, label or object as value', () => {
   const { getAllByRole, getByRole, getByTestId } = render(
-    <Form
-      initialValues={{ select: [{ label: 'January', value: 'january' }, 'february', 'March'] }}
-      validate={false}
-    >
-      <ConnectedField
-        component={Select}
-        dataTestId="select"
-        isMultiple
-        label="Select"
-        name="select"
-        options={MONTHS}
-      />
-    </Form>
+    <Select
+      dataTestId="select"
+      isMultiple
+      name="select"
+      options={MONTHS}
+      value={[{ label: 'January', value: 'january' }, 'february', 'March']}
+    />
   )
 
   const select = getByTestId('select')
@@ -280,24 +197,19 @@ test('<Select> can accept value, label or object as value', () => {
   tags = getAllByRole('listitem')
   expect(tags.length).toBe(4)
 
-  const formValues = getFormValues(getByTestId('values'))
   expect(select).toHaveTextContent('')
   expect(tags.map(tag => tag.textContent)).toStrictEqual(['January', 'February', 'March', 'April'])
-  expect(formValues.select).toStrictEqual(['january', 'february', 'march', 'april'])
 })
 
-test.skip('<Select isMultiple> can remove multiple items', () => {
+test('<Select isMultiple> can remove multiple items', () => {
   const { getAllByRole, getByTestId } = render(
-    <Form initialValues={{ select: ['february', 'march'] }} validate={false}>
-      <ConnectedField
-        component={Select}
-        dataTestId="select"
-        isMultiple
-        label="Select"
-        name="select"
-        options={MONTHS}
-      />
-    </Form>
+    <Select
+      dataTestId="select"
+      isMultiple
+      name="select"
+      options={MONTHS}
+      value={['february', 'march']}
+    />
   )
 
   const select = getByTestId('select')
@@ -309,23 +221,13 @@ test.skip('<Select isMultiple> can remove multiple items', () => {
   tags = getAllByRole('listitem')
   expect(tags.length).toBe(1)
 
-  const formValues = getFormValues(getByTestId('values'))
   expect(select).toHaveTextContent('')
   expect(tags.map(tag => tag.textContent)).toStrictEqual(['February'])
-  expect(formValues.select).toStrictEqual(['february'])
 })
 
-test("<Select> doesn't show clear button", () => {
+test.skip("<Select> doesn't show clear button", () => {
   const { getByRole, getByTestId, queryByTitle } = render(
-    <Form initialValues={{}} validate={false}>
-      <ConnectedField
-        component={Select}
-        dataTestId="select"
-        label="Select"
-        name="select"
-        options={MONTHS}
-      />
-    </Form>
+    <Select dataTestId="select" name="select" options={MONTHS} />
   )
 
   const select = getByTestId('select')
@@ -333,55 +235,43 @@ test("<Select> doesn't show clear button", () => {
 
   const options = getByRole('listbox').querySelectorAll('li')
   fireEvent.click(options[1])
-
-  const formValues = getFormValues(getByTestId('values'))
   expect(select).toHaveTextContent('February')
-  expect(formValues.select).toStrictEqual('february')
 
   // Use `queryByTitle` to expect no clear button
   const clearButton = queryByTitle('Clear')
   expect(clearButton).toBeNull()
 })
 
-test.skip('<Select renderItem> formats items', () => {
+test('<Select renderItem> formats items', () => {
   const { getByTestId } = render(
-    <Form initialValues={{ select: 'february' }} validate={false}>
-      <ConnectedField
-        component={Select}
-        dataTestId="select"
-        label="Select"
-        name="select"
-        options={MONTHS}
-        renderItem={option => (
-          <div style={{ display: 'flex', alignItems: 'center' }}>
-            <DateIcon mr="xs" size="sm" title="Calendar" /> <span>{option.label}</span>
-          </div>
-        )}
-      />
-    </Form>
+    <Select
+      dataTestId="select"
+      name="select"
+      options={MONTHS}
+      renderItem={option => (
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <DateIcon mr="xs" size="sm" title="Calendar" /> <span>{(option as Option).label}</span>
+        </div>
+      )}
+      value="february"
+    />
   )
 
   const select = getByTestId('select')
   const icon = select.querySelector('svg')
-
-  const formValues = getFormValues(getByTestId('values'))
   expect(select).toHaveTextContent('February')
   expect(icon.getAttribute('title')).toBe('Calendar')
-  expect(formValues.select).toStrictEqual('february')
 })
 
-test.skip('<Select icon> shows icon', () => {
+test('<Select icon> shows icon', () => {
   const { container } = render(
-    <Form initialValues={{ select: 'february' }} validate={false}>
-      <ConnectedField
-        component={Select}
-        dataTestId="select"
-        icon={<AvatarIcon color="light.100" />}
-        label="Select"
-        name="select"
-        options={MONTHS}
-      />
-    </Form>
+    <Select
+      dataTestId="select"
+      icon={<AvatarIcon color="light.100" />}
+      name="select"
+      options={MONTHS}
+      value="february"
+    />
   )
 
   const icon = container.querySelector('[alt="Avatar"]')
@@ -390,16 +280,7 @@ test.skip('<Select icon> shows icon', () => {
 
 test('<Select isSearchable> filters results', () => {
   const { getByRole, getByTestId } = render(
-    <Form initialValues={{}} validate={false}>
-      <ConnectedField
-        component={Select}
-        dataTestId="select"
-        isSearchable
-        label="Select"
-        name="select"
-        options={MONTHS}
-      />
-    </Form>
+    <Select dataTestId="select" isSearchable name="select" options={MONTHS} />
   )
 
   const select = getByTestId('select')
@@ -409,23 +290,12 @@ test('<Select isSearchable> filters results', () => {
   expect(options.length).toBe(3) // September, November, December
 
   fireEvent.click(options[1])
-  const formValues = getFormValues(getByTestId('values'))
   expect((select as HTMLInputElement).value).toBe('November')
-  expect(formValues.select).toStrictEqual('november')
 })
 
 test("<Select isSearchable> doesn't show list if no results", () => {
   const { getByTestId, queryByRole } = render(
-    <Form initialValues={{}} validate={false}>
-      <ConnectedField
-        component={Select}
-        dataTestId="select"
-        isSearchable
-        label="Select"
-        name="select"
-        options={MONTHS}
-      />
-    </Form>
+    <Select dataTestId="select" isSearchable name="select" options={MONTHS} />
   )
 
   const select = getByTestId('select')
@@ -442,17 +312,13 @@ test('<Select isCreatable> can create new items', () => {
   const secondItem = { label: 'Cumku', value: 'cumku' }
 
   const { getByRole, getByTestId } = render(
-    <Form initialValues={{}} validate={false}>
-      <ConnectedField
-        component={Select}
-        dataTestId="select"
-        isCreatable
-        label="Select"
-        name="select"
-        onCreate={handleCreate}
-        options={MONTHS}
-      />
-    </Form>
+    <Select
+      dataTestId="select"
+      isCreatable
+      name="select"
+      onCreate={handleCreate}
+      options={MONTHS}
+    />
   )
 
   const select = getByTestId('select')
@@ -477,10 +343,6 @@ test('<Select isCreatable> can create new items', () => {
   // Expect content to be new item
   expect((select as HTMLInputElement).value).toBe(firstItem.label)
 
-  // Expect form values to have new item
-  let formValues = getFormValues(getByTestId('values'))
-  expect(formValues.select).toStrictEqual(firstItem.label)
-
   // Add another item
   // Type again in search box
   userEvent.clear(select)
@@ -502,28 +364,21 @@ test('<Select isCreatable> can create new items', () => {
 
   // Expect content to be new item
   expect((select as HTMLInputElement).value).toBe(secondItem.label)
-
-  // Expect form values to have new item
-  formValues = getFormValues(getByTestId('values'))
-  expect(formValues.select).toStrictEqual(secondItem.label)
 })
 
 test('<Select isCreatable isMultiple> can create new items', () => {
   const handleCreate = jest.fn()
 
   const { getByRole, getByTestId } = render(
-    <Form initialValues={{ select: ['february', 'march'] }} validate={false}>
-      <ConnectedField
-        component={Select}
-        dataTestId="select"
-        isCreatable
-        isMultiple
-        label="Select"
-        name="select"
-        onCreate={handleCreate}
-        options={MONTHS}
-      />
-    </Form>
+    <Select
+      dataTestId="select"
+      isCreatable
+      isMultiple
+      name="select"
+      onCreate={handleCreate}
+      options={MONTHS}
+      value={['february', 'march']}
+    />
   )
 
   const select = getByTestId('select')
@@ -553,26 +408,18 @@ test('<Select isCreatable isMultiple> can create new items', () => {
 
   // Expect content to be new item
   expect((select as HTMLInputElement).value).toBe('')
-
-  // Expect form values to have new item
-  const formValues = getFormValues(getByTestId('values'))
-  expect(formValues.select).toStrictEqual(['february', 'march', 'Kayab'])
 })
 
 test("<Select isCreatable> can't create an existing item", () => {
   const handleCreate = jest.fn()
   const { getByRole, getByTestId } = render(
-    <Form initialValues={{}} validate={false}>
-      <ConnectedField
-        component={Select}
-        dataTestId="select"
-        isCreatable
-        label="Select"
-        name="select"
-        onCreate={handleCreate}
-        options={MONTHS}
-      />
-    </Form>
+    <Select
+      dataTestId="select"
+      isCreatable
+      name="select"
+      onCreate={handleCreate}
+      options={MONTHS}
+    />
   )
 
   const select = getByTestId('select')
@@ -589,30 +436,23 @@ test("<Select isCreatable> can't create an existing item", () => {
 
   // Expect `onCreate` callback not to be called
   expect(handleCreate).toHaveBeenCalledTimes(0)
-
-  const formValues = getFormValues(getByTestId('values'))
   expect((select as HTMLInputElement).value).toBe('October')
-  expect(formValues.select).toStrictEqual('october')
 })
 
 test('<Select groupsEnabled> shows groups header', () => {
   const { getAllByTestId, getByTestId } = render(
-    <Form initialValues={{}} validate={false}>
-      <ConnectedField
-        component={Select}
-        dataTestId="select"
-        groupsEnabled
-        label="Social networks"
-        name="select"
-        options={SOCIAL_OPT_GROUP}
-        renderGroupHeader={({ label, options }) => (
-          <div data-testid="group-header">
-            <h4>{label}</h4>
-            <span>{options.length}</span>
-          </div>
-        )}
-      />
-    </Form>
+    <Select
+      dataTestId="select"
+      groupsEnabled
+      name="select"
+      options={SOCIAL_OPT_GROUP}
+      renderGroupHeader={({ label, options }) => (
+        <div data-testid="group-header">
+          <h4>{label}</h4>
+          <span>{options.length}</span>
+        </div>
+      )}
+    />
   )
 
   const select = getByTestId('select')
diff --git a/packages/Select/index.tsx b/packages/Select/index.tsx
index 6874643d72..743ba27b86 100644
--- a/packages/Select/index.tsx
+++ b/packages/Select/index.tsx
@@ -8,7 +8,7 @@ import { matchSorter } from 'match-sorter'
 import { DownIcon } from '@welcome-ui/icons.down'
 import { ClearButton } from '@welcome-ui/clear-button'
 import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
-import { createEvent, CreateEvent, Variant } from '@welcome-ui/utils'
+import { createEvent, CreateEvent, DefaultFieldStylesProps } from '@welcome-ui/utils'
 
 import {
   getInputValue,
@@ -29,13 +29,13 @@ export type Option = { label: string; value: OptionValue; icon?: React.ReactElem
 export type OptionGroup = { label: string; options: Option[] }
 export type OptionItem = Option | OptionGroup
 export type Options = Array<Option | OptionGroup>
-export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-export type SelectValue = string | string[]
-export interface SelectOptions {
+export type SelectValue = string | number | string[] | Option | (string | Option)[]
+
+export type SelectOptions = {
   autoComplete?: string
   autoFocus?: boolean
   disabled?: boolean
-  icon?: string
+  icon?: string | JSX.Element
   id?: string
   isClearable?: boolean
   isCreatable?: boolean
@@ -52,14 +52,12 @@ export interface SelectOptions {
   renderCreateItem?: (inputValue: SelectValue) => void
   renderItem?: (item: Option | unknown, isItemSelected?: boolean) => string | React.ReactElement
   renderMultiple?: (values: Option[], handleRemove: (value: string) => void) => React.ReactElement
-  size?: Size
   value?: SelectValue
-  variant?: Variant
   allowUnselectFromList?: boolean
   disableCloseOnSelect?: boolean
   groupsEnabled?: boolean
   renderGroupHeader?: (option: OptionGroup) => void
-}
+} & DefaultFieldStylesProps
 export type SelectProps = CreateWuiProps<
   'input',
   SelectOptions & Omit<DownshiftProps<Option>, keyof SelectOptions | 'children'>
diff --git a/packages/Select/styles.ts b/packages/Select/styles.ts
index ce7a5d0335..b675e80fe3 100644
--- a/packages/Select/styles.ts
+++ b/packages/Select/styles.ts
@@ -3,9 +3,15 @@ import { th } from '@xstyled/system'
 import { StyledIcon } from '@welcome-ui/icon'
 import { StyledTag } from '@welcome-ui/tag'
 import { componentSystem, shouldForwardProp, wrapperSystem } from '@welcome-ui/system'
-import { centerContent, defaultFieldStyles, overflowEllipsis } from '@welcome-ui/utils'
-import { cardStyles } from '@welcome-ui/utils'
-import { Size } from 'Select'
+import {
+  cardStyles,
+  centerContent,
+  defaultFieldStyles,
+  DefaultFieldStylesProps,
+  overflowEllipsis,
+} from '@welcome-ui/utils'
+
+import { SelectOptions } from './index'
 
 export const Wrapper = styled('div').withConfig({ shouldForwardProp })(
   ({ connected }: { connected: boolean }) => css`
@@ -19,9 +25,9 @@ export const InputWrapper = styled.div`
 `
 
 export const Input = styled('div').withConfig({ shouldForwardProp })(
-  ({ hasIcon, size }: { hasIcon: boolean; size: Size }) => css`
+  ({ hasIcon, size, variant }: { hasIcon: boolean } & SelectOptions) => css`
     position: relative;
-    ${defaultFieldStyles({ size })};
+    ${defaultFieldStyles({ size, variant })};
     ${overflowEllipsis};
     padding-right: ${th(`defaultFields.sizes.${size}.height`)};
     ${hasIcon &&
@@ -103,7 +109,7 @@ export const Item = styled.li(
 )
 
 export const Icon = styled.div(
-  ({ size }: { size: Size }) => css`
+  ({ size }: { size: DefaultFieldStylesProps['size'] }) => css`
     position: absolute;
     width: ${th(`defaultFields.sizes.${size}.height`)};
     padding: 0;
@@ -124,7 +130,7 @@ export const Indicators = styled.div`
 `
 
 export const DropDownIndicator = styled.button.withConfig({ shouldForwardProp })(
-  ({ isOpen, size }: { isOpen?: boolean; size: Size }) => css`
+  ({ isOpen, size }: { isOpen?: boolean; size: DefaultFieldStylesProps['size'] }) => css`
     position: relative;
     height: 100%;
     width: ${th(`defaultFields.sizes.${size}.height`)};
diff --git a/packages/Select/utils.ts b/packages/Select/utils.ts
index 7c01799f8b..c0d0c51f63 100644
--- a/packages/Select/utils.ts
+++ b/packages/Select/utils.ts
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { Option, OptionItem, Options, OptionValue } from './index'
+import { Option, OptionItem, Options, OptionValue, SelectValue } from './index'
 
 const EMPTY_STRING = ''
 
@@ -49,10 +49,7 @@ export const getOption = (value: string | number | Option, options: Options = []
   return (option as Option) || ({ value: kebabCase(value), label: value } as Option)
 }
 
-export const getOptionsFromSelected = (
-  selected: string | string[] | number,
-  options: Options
-): Option[] => {
+export const getOptionsFromSelected = (selected: SelectValue, options: Options): Option[] => {
   if (!selected && selected !== 0) {
     return []
   } else if (Array.isArray(selected)) {
diff --git a/packages/System/index.tsx b/packages/System/index.tsx
index 825c2c2582..91689d5951 100644
--- a/packages/System/index.tsx
+++ b/packages/System/index.tsx
@@ -140,20 +140,6 @@ export type CreateWuiComponent<Component extends As, Options = {}> = {
   displayName?: string
 }
 
-// eslint-disable-next-line @typescript-eslint/ban-types
-export type CreateWuiFieldComponent<Component extends As, Options = {}> = {
-  <InputComponent extends As>(
-    props: CreateWuiProps<
-      InputComponent,
-      Omit<Options, keyof React.ComponentPropsWithoutRef<InputComponent>>
-    > & {
-      component: InputComponent
-    }
-  ): JSX.Element
-  (props: CreateWuiProps<Component, Options>): JSX.Element
-  displayName?: string
-}
-
 // eslint-disable-next-line @typescript-eslint/ban-types
 export const forwardRef = <Component extends As, Props = {}>(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -162,12 +148,4 @@ export const forwardRef = <Component extends As, Props = {}>(
   return React.forwardRef(component)
 }
 
-// eslint-disable-next-line @typescript-eslint/ban-types
-export const forwardFieldRef = <Component extends As, Props = {}>(
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  component: React.ForwardRefRenderFunction<any, Props>
-): CreateWuiFieldComponent<Component, Props> => {
-  return React.forwardRef(component) as unknown as CreateWuiFieldComponent<Component, Props>
-}
-
 export type ExtraSize = number | string
diff --git a/packages/Textarea/index.tsx b/packages/Textarea/index.tsx
index dbb57b5ab0..edfee26429 100644
--- a/packages/Textarea/index.tsx
+++ b/packages/Textarea/index.tsx
@@ -1,14 +1,11 @@
 import React from 'react'
 import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
+import { DefaultFieldStylesProps } from '@welcome-ui/utils'
 
 import * as S from './styles'
 
-export type Size = 'sm' | 'md' | 'lg'
-export type Variant = 'error' | 'info' | 'success' | 'valid' | 'warning'
-
-export interface TextareaOptions {
+export type TextareaOptions = {
   autoFocus?: boolean
-  connected?: boolean
   disabled?: boolean
   maxLength?: number
   minRows?: number
@@ -18,14 +15,12 @@ export interface TextareaOptions {
   onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void
   onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void
   placeholder?: string
-  size?: Size
   value: string
-  variant?: Variant
-}
+} & DefaultFieldStylesProps
 
 export type TextareaProps = CreateWuiProps<'textarea', TextareaOptions>
 
-const TextareaComponent = forwardRef<'textarea', TextareaProps>(
+export const Textarea = forwardRef<'textarea', TextareaProps>(
   (
     {
       autoFocus,
@@ -67,8 +62,4 @@ const TextareaComponent = forwardRef<'textarea', TextareaProps>(
   )
 )
 
-TextareaComponent.displayName = 'Textarea'
-
-export const Textarea = Object.assign(TextareaComponent, {
-  type: 'Textarea',
-})
+Textarea.displayName = 'Textarea'
diff --git a/packages/Textarea/styles.ts b/packages/Textarea/styles.ts
index f08554a7e1..c88740f8f5 100644
--- a/packages/Textarea/styles.ts
+++ b/packages/Textarea/styles.ts
@@ -1,18 +1,16 @@
 import styled, { css } from '@xstyled/styled-components'
 import { th } from '@xstyled/system'
-import { componentSystem, shouldForwardProp, system } from '@welcome-ui/system'
-import { defaultFieldStyles, Variant } from '@welcome-ui/utils'
+import { shouldForwardProp, system } from '@welcome-ui/system'
+import { defaultFieldStyles } from '@welcome-ui/utils'
 
 import { TextareaOptions } from './index'
 
-export const Textarea = styled('textarea').withConfig({ shouldForwardProp })<
-  Pick<TextareaOptions, 'connected' | 'size' | 'variant'>
->(
-  ({ connected, size, variant }) => css`
-    ${defaultFieldStyles({ size, variant: variant as Variant })};
+export const Textarea = styled('textarea').withConfig({ shouldForwardProp })<TextareaOptions>(
+  ({ size, variant }) => css`
+    ${defaultFieldStyles({ size, variant })};
     ${th('textareas')};
     line-height: body1;
     padding: sm;
-    ${connected ? componentSystem : system};
+    ${system};
   `
 )
diff --git a/packages/Toggle/index.tsx b/packages/Toggle/index.tsx
index 02225248a9..ddbd3c375e 100644
--- a/packages/Toggle/index.tsx
+++ b/packages/Toggle/index.tsx
@@ -4,14 +4,11 @@ import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
 
 import * as S from './styles'
 
-export type ToggleProps = CreateWuiProps<'input', Omit<CheckboxProps, 'Component'>>
+export type ToggleOptions = Omit<CheckboxProps, 'Component'>
+export type ToggleProps = CreateWuiProps<'input', ToggleOptions>
 
-const ToggleComponent = forwardRef<'input', ToggleProps>((props, ref) => (
+export const Toggle = forwardRef<'input', ToggleProps>((props, ref) => (
   <Checkbox {...props} Component={S.Toggle} ref={ref} />
 ))
 
-ToggleComponent.displayName = 'Toggle'
-
-export const Toggle = Object.assign(ToggleComponent, {
-  type: 'Toggle',
-})
+Toggle.displayName = 'Toggle'
diff --git a/packages/Toggle/styles.ts b/packages/Toggle/styles.ts
index cc571a0e15..f955e47857 100644
--- a/packages/Toggle/styles.ts
+++ b/packages/Toggle/styles.ts
@@ -1,17 +1,12 @@
 import styled, { css } from '@xstyled/styled-components'
 import { th } from '@xstyled/system'
 import { Checkbox as ReakitCheckbox } from 'reakit/Checkbox'
-import { componentSystem, shouldForwardProp, system } from '@welcome-ui/system'
+import { shouldForwardProp, system } from '@welcome-ui/system'
 
-export interface StyledToggleProps {
-  checked?: boolean
-  connected?: boolean
-  disabled?: boolean
-  order: string
-}
+import { ToggleOptions } from './index'
 
-export const Toggle = styled(ReakitCheckbox).withConfig({ shouldForwardProp })<StyledToggleProps>(
-  ({ checked, connected, disabled, order = '-1', theme }) => css`
+export const Toggle = styled(ReakitCheckbox).withConfig({ shouldForwardProp })<ToggleOptions>(
+  ({ checked, disabled, order = '-1', theme }) => css`
     ${th('toggles.item.default')};
     position: relative;
     display: block;
@@ -61,6 +56,6 @@ export const Toggle = styled(ReakitCheckbox).withConfig({ shouldForwardProp })<S
       }
     `};
 
-    ${connected ? componentSystem : system};
+    ${system};
   `
 )
diff --git a/packages/Utils/field-styles.ts b/packages/Utils/field-styles.ts
index 6760b22e02..a9bec21047 100644
--- a/packages/Utils/field-styles.ts
+++ b/packages/Utils/field-styles.ts
@@ -3,15 +3,13 @@ import { th } from '@xstyled/system'
 
 import { getVariantColor, Variant } from './variants'
 
-type Size = unknown
-
-export const defaultFieldStyles = ({
-  size,
-  variant,
-}: {
-  size?: Size
-  variant?: Variant
-}): ReturnType<typeof css> => css`
+export type Size = 'sm' | 'md' | 'lg'
+
+export type DefaultFieldStylesProps = Partial<{ size: Size; variant: Variant }>
+
+type DefaultFieldStyles = (args: DefaultFieldStylesProps) => ReturnType<typeof css>
+
+export const defaultFieldStyles: DefaultFieldStyles = ({ size, variant }) => css`
   ${th('defaultFields.default')};
   width: 100%;
   border-color: ${getVariantColor(variant)};
diff --git a/packages/Utils/index.tsx b/packages/Utils/index.ts
similarity index 100%
rename from packages/Utils/index.tsx
rename to packages/Utils/index.ts
diff --git a/packages/Utils/rollup.config.js b/packages/Utils/rollup.config.js
index 97caba7554..372fe005df 100644
--- a/packages/Utils/rollup.config.js
+++ b/packages/Utils/rollup.config.js
@@ -1,3 +1,3 @@
 import { getRollupConfig } from '../../rollup.config.js'
 
-export default getRollupConfig({ pwd: __dirname, ts: true })
+export default getRollupConfig({ pwd: __dirname, ts: true, inputFile: 'index.ts' })
diff --git a/packages/Utils/tsconfig.json b/packages/Utils/tsconfig.json
index 880804c08b..4fe490521d 100644
--- a/packages/Utils/tsconfig.json
+++ b/packages/Utils/tsconfig.json
@@ -1,4 +1,4 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["index.tsx"]
+  "include": ["index.ts"]
 }
diff --git a/packages/VariantIcon/index.tsx b/packages/VariantIcon/index.tsx
index c39a3c69ca..bef319948f 100644
--- a/packages/VariantIcon/index.tsx
+++ b/packages/VariantIcon/index.tsx
@@ -3,11 +3,10 @@ import { AlertIcon } from '@welcome-ui/icons.alert'
 import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
 import { CheckIcon } from '@welcome-ui/icons.check'
 import { InformationIcon } from '@welcome-ui/icons.information'
+import { Variant } from '@welcome-ui/utils'
 
 import * as S from './styles'
 
-export type Variant = 'info' | 'success' | 'warning' | 'error'
-
 export interface VariantIconOptions {
   icon?: JSX.Element
   variant?: Variant
diff --git a/packages/VariantIcon/styles.ts b/packages/VariantIcon/styles.ts
index 84bb344795..8aa71bcf31 100644
--- a/packages/VariantIcon/styles.ts
+++ b/packages/VariantIcon/styles.ts
@@ -1,8 +1,6 @@
 import styled, { css } from '@xstyled/styled-components'
 import { Box } from '@welcome-ui/box'
-import { getVariantColor } from '@welcome-ui/utils'
-
-import { Variant } from './index'
+import { getVariantColor, Variant } from '@welcome-ui/utils'
 
 export const VariantIcon = styled(Box)<{ variant: Variant }>(
   ({ variant }) => css`
diff --git a/scripts/edit-packages.js b/scripts/edit-packages.js
index 38a69fd47b..74da7e3a6a 100644
--- a/scripts/edit-packages.js
+++ b/scripts/edit-packages.js
@@ -13,10 +13,6 @@ fs.writeFileAsync = util.promisify(fs.writeFile)
 
 const DIRECTORIES = [path.join(__dirname, '../packages')]
 
-// UPDATE THIS FUNCTION TO RETURN NEW CONFIG FOR PACKAGE.JSON
-// componentName: ConnectedField
-// pkgName: connected-field
-// config: content of package.json
 // eslint-disable-next-line no-unused-vars
 const getNewConfig = ({ componentName, config, pkgName }) => {
   return {
diff --git a/utils/Code.js b/utils/Code.js
deleted file mode 100644
index 84a32a88f7..0000000000
--- a/utils/Code.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/* eslint-disable react/jsx-key */
-/* eslint-disable react/prop-types */
-import React from 'react'
-import Highlight, { defaultProps } from 'prism-react-renderer'
-
-export const Code = ({ children, language = 'jsx' }) => {
-  return (
-    <Highlight {...defaultProps} code={children} language={language}>
-      {({ getLineProps, getTokenProps, tokens }) => (
-        <pre>
-          {tokens.map((line, i) => (
-            <div {...getLineProps({ line, key: i })}>
-              {line.map((token, key) => (
-                <span {...getTokenProps({ token, key })} />
-              ))}
-            </div>
-          ))}
-        </pre>
-      )}
-    </Highlight>
-  )
-}
diff --git a/utils/Form.js b/utils/Form.js
deleted file mode 100644
index 090ea45a5e..0000000000
--- a/utils/Form.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/* eslint-disable react/jsx-handler-names */
-/* eslint-disable no-console */
-
-import React from 'react'
-import { Form as FinalForm } from 'react-final-form'
-
-import { Code } from './Code'
-
-// eslint-disable-next-line react/prop-types
-export const Form = ({ children, initialValues, validate }) => (
-  <FinalForm initialValues={initialValues} onSubmit={console.debug} validate={validate}>
-    {({ handleSubmit, values }) => (
-      <>
-        <form onSubmit={handleSubmit}>{children}</form>
-        <div data-testid="values">
-          {Object.keys(values).length > 0 && (
-            <Code language="json">{JSON.stringify(values, 0, 2)}</Code>
-          )}
-        </div>
-      </>
-    )}
-  </FinalForm>
-)
-
-export const getFormValues = node =>
-  node.querySelector('pre') ? JSON.parse(node.querySelector('pre').textContent) : {}
diff --git a/yarn.lock b/yarn.lock
index 9e56720699..4a5463f8ab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14337,13 +14337,6 @@ pnp-webpack-plugin@1.6.4:
   dependencies:
     ts-pnp "^1.1.6"
 
-polished@^3.4.1:
-  version "3.7.2"
-  resolved "https://registry.yarnpkg.com/polished/-/polished-3.7.2.tgz#ec5ddc17a7d322a574d5e10ddd2a6f01d3e767d1"
-  integrity sha512-pQKtpZGmsZrW8UUpQMAnR7s3ppHeMQVNyMDKtUyKwuvDmklzcEyM5Kllb3JyE/sE/x7arDmyd35i+4vp99H6sQ==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
-
 popper.js@^1.14.4, popper.js@^1.16.1:
   version "1.16.1"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"