diff --git a/examples/react-native/App.js b/examples/react-native/App.js
index a4bfb2c..eef044b 100644
--- a/examples/react-native/App.js
+++ b/examples/react-native/App.js
@@ -8,6 +8,7 @@ import Styleguide from './screens/Styleguide'
 import Device from './screens/Device'
 import IconsScreen from './screens/Icons'
 import ChartsScreen from './screens/Charts'
+import FormsScreen from './screens/Forms'
 
 import {Icons, DrawerContent, Theme, Header} from '@vela/ui'
 import Surface from '../../src/components/Surface'
@@ -39,6 +40,18 @@ const IconsNavigator = () => {
   )
 }
 
+const FormsNavigator = () => {
+  return (
+    <StackNavigator.Navigator>
+      <StackNavigator.Screen
+        component={FormsScreen}
+        name="Forms"
+        options={{header: Header}}
+      />
+    </StackNavigator.Navigator>
+  )
+}
+
 const ChartsNavigator = () => {
   return (
     <StackNavigator.Navigator>
@@ -74,6 +87,14 @@ function App() {
               drawerIcon: Icons.Bolt
             }}
           />
+          <Drawer.Screen
+            name="Forms"
+            component={FormsNavigator}
+            options={{
+              drawerLabel: 'Forms',
+              drawerIcon: Icons.Bolt
+            }}
+          />
           <Drawer.Screen
             name="Profile"
             component={Profile}
diff --git a/examples/react-native/screens/Forms.js b/examples/react-native/screens/Forms.js
new file mode 100644
index 0000000..719af1c
--- /dev/null
+++ b/examples/react-native/screens/Forms.js
@@ -0,0 +1,28 @@
+import React, {useState} from 'react'
+import {
+    Screen,
+    Box,
+    TextField,
+    PhoneField
+  } from '@vela/ui'
+  import { Formik } from 'formik'
+import EmailField from '../../../src/components/Form/EmailField'
+
+const initialValues = {TextField: '', PhoneField: '', EmailField: ''}
+
+  export default FormsScreen = () => {
+      const [v, sv] = useState('')
+      return (
+          <Screen>
+              <Box>
+                <Formik initialValues={initialValues}>
+                  <>
+                    <TextField name='TextField' />
+                    <PhoneField name='PhoneField' />
+                    <EmailField name='EmailField' />
+                  </>
+                </Formik>
+              </Box>
+          </Screen>
+      )
+  }
\ No newline at end of file
diff --git a/examples/react-native/screens/Styleguide.js b/examples/react-native/screens/Styleguide.js
index d375732..32cdfe9 100644
--- a/examples/react-native/screens/Styleguide.js
+++ b/examples/react-native/screens/Styleguide.js
@@ -8,10 +8,8 @@ import {
   Spacer,
   Text,
   Button,
-  TextInput,
   Label,
   SelectInput,
-  TextField,
   Card,
   Box,
   Image,
@@ -67,30 +65,6 @@ function Styleguide({navigation}) {
 
           <Spacer size="xl" />
 
-          <Heading size="s">Inputs</Heading>
-          <Spacer />
-          <TextInput placeholder="Placeholder" />
-          <Spacer size="s" />
-          <TextInput placeholder="Placeholder" error />
-          <Spacer size="s" />
-          <SelectInput placeholder="Placeholder" />
-
-          <Spacer />
-
-          <TextField label="Label" placeholder="Placeholder" />
-          <TextField
-            label="Label"
-            placeholder="Placeholder"
-            error="Error message"
-          />
-          <TextField
-            label="Label"
-            placeholder="Placeholder"
-            error="Error message"
-          />
-
-          <Spacer size="xl" />
-
           <Heading size="s">Control</Heading>
           <Spacer />
           <Control
@@ -186,16 +160,6 @@ function Styleguide({navigation}) {
             <Button label="Skip" />
           </Card>
 
-          <Spacer />
-
-          <Card>
-            <Heading>Form</Heading>
-            <Spacer size="s" />
-            <TextField label="Label" placeholder="Placeholder" />
-            <TextField label="Label" placeholder="Placeholder" />
-            <Button label="Submit" variant="primary" solid />
-          </Card>
-
           <Spacer size="xl" />
 
           <Heading>Bicleta Elétrica - Uma tecnologia sustentável</Heading>
diff --git a/examples/react-native/yarn.lock b/examples/react-native/yarn.lock
index df5f78a..f964ad3 100644
--- a/examples/react-native/yarn.lock
+++ b/examples/react-native/yarn.lock
@@ -1128,6 +1128,7 @@
 "@vela/ui@file:../..":
   version "0.1.4"
   dependencies:
+    formik "^2.1.4"
     react-native-masked-text "^1.13.0"
 
 abab@^2.0.0:
@@ -2128,6 +2129,11 @@ deep-is@~0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
+deepmerge@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
+  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
+
 deepmerge@^3.2.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-3.3.0.tgz#d3c47fd6f3a93d517b14426b0628a17b0125f5f7"
@@ -2900,6 +2906,20 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
+formik@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/formik/-/formik-2.1.4.tgz#8deef07ec845ea98f75e03da4aad7aab4ac46570"
+  integrity sha512-oKz8S+yQBzuQVSEoxkqqJrKQS5XJASWGVn6mrs+oTWrBoHgByVwwI1qHiVc9GKDpZBU9vAxXYAKz2BvujlwunA==
+  dependencies:
+    deepmerge "^2.1.1"
+    hoist-non-react-statics "^3.3.0"
+    lodash "^4.17.14"
+    lodash-es "^4.17.14"
+    react-fast-compare "^2.0.1"
+    scheduler "^0.18.0"
+    tiny-warning "^1.0.2"
+    tslib "^1.10.0"
+
 fragment-cache@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
@@ -3136,6 +3156,13 @@ hoist-non-react-statics@^2.3.1:
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
   integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
 
+hoist-non-react-statics@^3.3.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hosted-git-info@^2.1.4:
   version "2.8.5"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.5.tgz#759cfcf2c4d156ade59b0b2dfabddc42a6b9c70c"
@@ -4183,6 +4210,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash-es@^4.17.14:
+  version "4.17.15"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
+  integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==
+
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
@@ -5431,11 +5463,21 @@ react-devtools-core@^3.6.3:
     shell-quote "^1.6.1"
     ws "^3.3.1"
 
+react-fast-compare@^2.0.1:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
+  integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
+
 react-is@^16.12.0:
   version "16.13.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.0.tgz#0f37c3613c34fe6b37cd7f763a0d6293ab15c527"
   integrity sha512-GFMtL0vHkiBv9HluwNZTggSn/sCyEt9n02aM0dSAjGGyqyNlAyftYm4phPxdvCigG15JreC5biwxCgTAJZ7yAA==
 
+react-is@^16.7.0:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
 react-is@^16.8.1, react-is@^16.8.4, react-is@^16.9.0:
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
@@ -5913,6 +5955,14 @@ scheduler@0.15.0, scheduler@^0.15.0:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.18.0.tgz#5901ad6659bc1d8f3fdaf36eb7a67b0d6746b1c4"
+  integrity sha512-agTSHR1Nbfi6ulI0kYNK0203joW2Y5W4po4l+v03tOoiJKpTBbxpNhWDvqc/4IcOw+KLmSiQLTasZ4cab2/UWQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 "semver@2 || 3 || 4 || 5", semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
@@ -6450,6 +6500,11 @@ time-stamp@^1.0.0:
   resolved "https://registry.yarnpkg.com/time-stamp/-/time-stamp-1.1.0.tgz#764a5a11af50561921b133f3b44e618687e0f5c3"
   integrity sha1-dkpaEa9QVhkhsTPztE5hhofg9cM=
 
+tiny-warning@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 tinymask@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/tinymask/-/tinymask-1.0.2.tgz#df3775a94087b0d3d056c256e8923c01b7ec0941"
@@ -6525,6 +6580,11 @@ tr46@^1.0.1:
   dependencies:
     punycode "^2.1.0"
 
+tslib@^1.10.0:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35"
+  integrity sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA==
+
 tslib@^1.8.1, tslib@^1.9.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
diff --git a/package-lock.json b/package-lock.json
index 9fb8993..6e4622b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1581,6 +1581,11 @@
       "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
       "dev": true
     },
+    "deepmerge": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
+    },
     "define-properties": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
@@ -2031,6 +2036,21 @@
       "dev": true,
       "optional": true
     },
+    "formik": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/formik/-/formik-2.1.4.tgz",
+      "integrity": "sha512-oKz8S+yQBzuQVSEoxkqqJrKQS5XJASWGVn6mrs+oTWrBoHgByVwwI1qHiVc9GKDpZBU9vAxXYAKz2BvujlwunA==",
+      "requires": {
+        "deepmerge": "^2.1.1",
+        "hoist-non-react-statics": "^3.3.0",
+        "lodash": "^4.17.14",
+        "lodash-es": "^4.17.14",
+        "react-fast-compare": "^2.0.1",
+        "scheduler": "^0.18.0",
+        "tiny-warning": "^1.0.2",
+        "tslib": "^1.10.0"
+      }
+    },
     "fragment-cache": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
@@ -2716,6 +2736,14 @@
         }
       }
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -2977,8 +3005,7 @@
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
     "js-yaml": {
       "version": "3.13.1",
@@ -3045,14 +3072,17 @@
     "lodash": {
       "version": "4.17.15",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
-      "dev": true
+      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
+    },
+    "lodash-es": {
+      "version": "4.17.15",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz",
+      "integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ=="
     },
     "loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dev": true,
       "requires": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
@@ -3277,6 +3307,11 @@
       "dev": true,
       "optional": true
     },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+    },
     "object-copy": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz",
@@ -3478,6 +3513,16 @@
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
       "dev": true
     },
+    "react-fast-compare": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
+    },
+    "react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "react-native-masked-text": {
       "version": "1.13.0",
       "resolved": "https://registry.npmjs.org/react-native-masked-text/-/react-native-masked-text-1.13.0.tgz",
@@ -3708,6 +3753,15 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "scheduler": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.18.0.tgz",
+      "integrity": "sha512-agTSHR1Nbfi6ulI0kYNK0203joW2Y5W4po4l+v03tOoiJKpTBbxpNhWDvqc/4IcOw+KLmSiQLTasZ4cab2/UWQ==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
     "semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@@ -4098,6 +4152,11 @@
       "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
       "dev": true
     },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "tinymask": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/tinymask/-/tinymask-1.0.2.tgz",
@@ -4167,8 +4226,7 @@
     "tslib": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
-      "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==",
-      "dev": true
+      "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
     },
     "type-check": {
       "version": "0.3.2",
diff --git a/package.json b/package.json
index 8011860..a5d79b9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vela/ui",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Vela React UI Toolkit",
   "main": "src/index.js",
   "directories": {
@@ -34,6 +34,7 @@
     "prettier": "^1.19.1"
   },
   "dependencies": {
+    "formik": "^2.1.4",
     "react-native-masked-text": "^1.13.0"
   }
 }
diff --git a/src/components/Form/EmailField.js b/src/components/Form/EmailField.js
new file mode 100644
index 0000000..d5c698b
--- /dev/null
+++ b/src/components/Form/EmailField.js
@@ -0,0 +1,21 @@
+import React from "react";
+import FieldBase from "./FieldBase";
+import TextInput from "./TextInput";
+
+const emailRegex = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/;
+
+const validateEmail = value => {
+  if (!emailRegex.test(value)) return "Email invalido.";
+};
+
+export default PhoneField = props => (
+  <FieldBase
+    {...props}
+    input={TextInput}
+    validate={validateEmail}
+    autoCompleteType="email"
+    keyboardType="email-address"
+    textContentType="emailAddress"
+    autoCapitalize="none"
+  />
+);
diff --git a/src/components/Form/FieldBase.js b/src/components/Form/FieldBase.js
new file mode 100644
index 0000000..cf035cd
--- /dev/null
+++ b/src/components/Form/FieldBase.js
@@ -0,0 +1,44 @@
+import React from "react";
+import {View} from "react-native"
+import { Field } from 'formik';
+import { useTheme } from '../../lib/theme'
+import Label from "../Label";
+import Spacer from "../Spacer";
+import Footnote from "../Footnote";
+
+const FieldBase = ({
+  field = {},
+  placeholder,
+  form = {},
+  label,
+  input,
+  ...props
+}) => {
+  const { colors } = useTheme();
+  const { name, value } = field;
+  const { errors, touched, handleChange, handleBlur } = form;
+  const error = errors && errors[name]
+  const hasTouched = touched && touched[name]
+  const Input = input;
+  const baseErrorStyle = {
+    color: colors.negative
+  };
+  console.log(touched)
+  return (
+    <View>
+      <Label>{label || name}</Label>
+      <Spacer size="xs" />
+      <Input
+        value={value}
+        onChangeText={handleChange(name)}
+        onBlur={handleBlur(name)}
+        error={hasTouched && error}
+        {...props}
+      />
+      <Footnote style={baseErrorStyle}>{hasTouched && error}</Footnote>
+      <Spacer size="s" />
+    </View>
+  );
+};
+
+export default props => <Field component={FieldBase} {...props} />
\ No newline at end of file
diff --git a/src/components/Form/PhoneField.js b/src/components/Form/PhoneField.js
index f418480..3ec1e87 100644
--- a/src/components/Form/PhoneField.js
+++ b/src/components/Form/PhoneField.js
@@ -1,58 +1,10 @@
 import React from 'react'
-import { TextInputMask } from 'react-native-masked-text'
-import { View } from 'react-native'
+import PhoneInput from './PhoneInput'
+import FieldBase from './FieldBase'
 
-import TextInput from './TextInput'
-import Label from '../Label'
-import Spacer from '../Spacer'
-import Footnote from '../Footnote'
-import { useTheme } from '../../lib/theme'
-
-const PhoneInput = props => (
-  <TextInputMask
-    type={'cel-phone'}
-    options={{
-      maskType: 'BRL',
-      withDDD: true,
-      dddMask: '(99) '
-    }}
-    customTextInput={TextInput}
-    {...props}
-  />
-)
-
-const PhoneField = ({
-  field = {},
-  placeholder,
-  form = {},
-  label,
-  ...props
-}) => {
-  const { colors } = useTheme()
-  const { name, value } = field
-  const { errors, handleChange, handleBlur } = form
-  const baseErrorStyle = {
-    color: colors.negative,
-  }
-
-  return (
-    <View>
-      <Label>{label || name}</Label>
-      <Spacer size="xs" />
-      <PhoneInput
-        error={errors}
-        placeholder={placeholder}
-        onChangeText={handleChange && handleChange(name)}
-        onBlur={handleChange && handleBlur(name)}
-        value={value}
-        {...props}
-      />
-      {errors && Object.keys(errors).map((error) => (
-        <Footnote style={baseErrorStyle}>{errors[error]}</Footnote>
-      ))}
-      <Spacer size="m" />
-    </View>
-  )
+const validatePhone = value => {
+  if (value.length < 14) return 'Telefone incompleto.'
 }
 
-export default PhoneField
+export default PhoneField = props =>
+  <FieldBase {...props} input={PhoneInput} validate={validatePhone} />
diff --git a/src/components/Form/PhoneInput.js b/src/components/Form/PhoneInput.js
index ca5acf1..b47610f 100644
--- a/src/components/Form/PhoneInput.js
+++ b/src/components/Form/PhoneInput.js
@@ -1,4 +1,4 @@
-import TextInput from '../TextInput'
+import TextInput from './TextInput'
 import React from 'react'
 import { TextInputMask } from 'react-native-masked-text'
 
diff --git a/src/components/Form/TextField.js b/src/components/Form/TextField.js
index fa6cb95..6f1d0ec 100644
--- a/src/components/Form/TextField.js
+++ b/src/components/Form/TextField.js
@@ -1,39 +1,11 @@
 import React from 'react'
-import {View} from 'react-native'
-import {useTheme} from '@vela/ui/src/lib/theme'
 import TextInput from './TextInput'
-import Label from '@vela/ui/src/components/Label'
-import Spacer from '@vela/ui/src/components/Spacer'
-import Footnote from '@vela/ui/src/components/Footnote'
+import FieldBase from './FieldBase'
+
+function TextField(props) {
 
-function TextField({
-  field = {},
-  placeholder,
-  form ={},
-  label,
-  ...props
-}) {
-  const {colors} = useTheme()
-  const {name, value} = field
-  const {error, handleChange, handleBlur} = form
-  const baseErrorStyle = {
-    color: colors.negative,
-  }
   return (
-    <View>
-      <Label>{label || name}</Label>
-      <Spacer size="xs" />
-      <TextInput
-        error={error}
-        placeholder={placeholder}
-        onChangeText={handleChange && handleChange(name)}
-        onBlur={handleChange && handleBlur(name)}
-        value={value}
-        {...props}
-      />
-      <Footnote style={baseErrorStyle}>{error}</Footnote>
-      <Spacer size="s" />
-    </View>
+      <FieldBase {...props} input={TextInput} />
   )
 }
 
diff --git a/src/components/Form/TextInput.js b/src/components/Form/TextInput.js
index cea75db..93af5ef 100644
--- a/src/components/Form/TextInput.js
+++ b/src/components/Form/TextInput.js
@@ -1,12 +1,18 @@
-import React from 'react'
+import React, {useState} from 'react'
 import {TextInput as BaseTextInput} from 'react-native'
 import {useTheme} from '../../lib/theme'
 
-function TextInput({style, error, ...props}) {
+function TextInput({style, error, onBlur, ...props}) {
   const {colors} = useTheme()
+  const [focus, setFocus] = useState(false)
+  const handleBlur = e => {
+    setFocus(false)
+    onBlur(e)
+  }
+  const handleFocus = () => setFocus(true)
   const baseStyle = {
     padding: 12,
-    borderColor: error ? colors.negative : colors.border,
+    borderColor: error ? colors.negative : focus ? colors.selected : colors.border,
     borderWidth: 1,
     borderRadius: 14,
     fontSize: 16,
@@ -21,6 +27,8 @@ function TextInput({style, error, ...props}) {
     <BaseTextInput
       style={[baseStyle, style]}
       placeholderTextColor={colors.placeholder}
+      onBlur={handleBlur}
+      onFocus={handleFocus}
       {...props}
     />
   )