diff --git a/examples/CMakeLists.txt b/examples/CMakeLists.txt
index 53382c7db3b2426163b38c37d22adf5e6be39f63..9ffb08ec4468857a767872bc76b5185222d27d59 100644
--- a/examples/CMakeLists.txt
+++ b/examples/CMakeLists.txt
@@ -1,6 +1,7 @@
 add_subdirectory(color)
 add_subdirectory(frame)
 add_subdirectory(gauge)
+add_subdirectory(input)
 add_subdirectory(menu)
 add_subdirectory(menu2)
 add_subdirectory(print_key_press)
diff --git a/examples/input/CMakeLists.txt b/examples/input/CMakeLists.txt
new file mode 100644
index 0000000000000000000000000000000000000000..1e37595c455c671619c9cded55de0add148812eb
--- /dev/null
+++ b/examples/input/CMakeLists.txt
@@ -0,0 +1,4 @@
+add_executable(input_main
+  main.cpp
+)
+target_link_libraries(input_main PRIVATE ftxui)
diff --git a/examples/input/main.cpp b/examples/input/main.cpp
new file mode 100644
index 0000000000000000000000000000000000000000..fa4e0be86a03bb5aa52fad77e2963a1af21fe5b7
--- /dev/null
+++ b/examples/input/main.cpp
@@ -0,0 +1,47 @@
+#include <chrono>
+#include <iostream>
+#include <thread>
+
+#include "ftxui/screen_interactive.hpp"
+#include "ftxui/component/input.hpp"
+#include "ftxui/component/component_vertical.hpp"
+#include "ftxui/util/string.hpp"
+
+using namespace ftxui::component;
+using namespace ftxui::dom;
+
+class MyComponent : ComponentVertical {
+ public:
+  MyComponent(ftxui::component::Delegate* delegate)
+      : ComponentVertical(delegate),
+        input_1(delegate->NewChild()),
+        input_2(delegate->NewChild()),
+        input_3(delegate->NewChild()) {
+    Focus(&input_1);
+  }
+
+  std::function<void()> on_enter = []() {};
+
+ private:
+  Input input_1;
+  Input input_2;
+  Input input_3;
+
+  Element Render() override {
+    return
+      frame(
+        vbox(
+          hbox(text(L" input_1 : "), input_1.Render()),
+          hbox(text(L" input_2 : "), input_2.Render()),
+          hbox(text(L" input_3 : "), input_3.Render())
+        )
+      );
+  }
+};
+
+int main(int argc, const char* argv[]) {
+  ftxui::ScreenInteractive screen(60, 17);
+  MyComponent component(screen.delegate());
+  component.on_enter = screen.ExitLoopClosure();
+  screen.Loop();
+}
diff --git a/examples/print_key_press/main.cpp b/examples/print_key_press/main.cpp
index b36d28153cc9664812b9011ec09dbf3eed05a9ca..eb5e927c67b6f19bd791958f096e86d9030146dd 100644
--- a/examples/print_key_press/main.cpp
+++ b/examples/print_key_press/main.cpp
@@ -15,26 +15,30 @@ class DrawKey : public ftxui::component::Component {
     using namespace ftxui::dom;
     Children children;
     for (size_t i = std::max(0, (int)keys.size() - 10); i < keys.size(); ++i) {
+        std::string code = "";
+      for(size_t j = 0; j<5; ++j)
+        code += " " + std::to_string(keys[i].values[j]);
+
       try {
-        std::string line = std::to_string(i) + " -> " + std::to_string(keys[i]) +
-                           " (" + char(keys[i]) + ")";
+        std::string line = code + " -> " + std::to_string(keys[i].values[0]) + " (" +
+                           char(keys[i].values[0]) + ")";
         children.push_back(text(to_wstring(line)));
       } catch (...) {
-        std::string line = std::to_string(i) + " -> " + std::to_string(keys[i]) +
-                           " (undefined)";
+        std::string line =
+            code + " -> " + std::to_string(keys[i].values[0]) + " (undefined)";
         children.push_back(text(to_wstring(line)));
       }
     }
     return vbox(std::move(children));
   }
 
-  bool Event(int key) override {
-    keys.push_back(key);
+  bool OnEvent(ftxui::Event event) override {
+    keys.push_back(event);
     return true;
   }
 
  private:
-  std::vector<int> keys;
+  std::vector<ftxui::Event> keys;
 };
 
 int main(int argc, const char* argv[]) {
diff --git a/examples/toggle/main.cpp b/examples/toggle/main.cpp
index 959cc705ff726ee882849eda3e525d691a10316a..e032392762edae0874ce3ae4304dc2458682ffc2 100644
--- a/examples/toggle/main.cpp
+++ b/examples/toggle/main.cpp
@@ -8,6 +8,7 @@
 #include "ftxui/component/component_vertical.hpp"
 #include "ftxui/util/string.hpp"
 
+using namespace ftxui;
 using namespace ftxui::component;
 using namespace ftxui::dom;
 
@@ -48,11 +49,11 @@ class MyComponent : ComponentVertical {
       );
   }
 
-  bool Event(int key) override {
-    if (ComponentVertical::Event(key))
+  bool OnEvent(Event event) override {
+    if (ComponentVertical::OnEvent(event))
       return true;
 
-    if (key == 10) {
+    if (event == Event::Return) {
       on_enter();
       return true;
     }
diff --git a/ftxui/CMakeLists.txt b/ftxui/CMakeLists.txt
index 7128aac9dccd4154d7efc2d8b33c8105ed79bc65..6991e408e31d266d4cdb6beb8919d0f2cfae6743 100644
--- a/ftxui/CMakeLists.txt
+++ b/ftxui/CMakeLists.txt
@@ -6,6 +6,7 @@ add_library(ftxui
   src/ftxui/component/component_direction.cpp
   src/ftxui/component/component_horizontal.cpp
   src/ftxui/component/component_vertical.cpp
+  src/ftxui/component/input.cpp
   src/ftxui/component/menu.cpp
   src/ftxui/component/toggle.cpp
   src/ftxui/dom/bold.cpp
@@ -14,7 +15,6 @@ add_library(ftxui
   src/ftxui/dom/dim.cpp
   src/ftxui/dom/flex.cpp
   src/ftxui/dom/frame.cpp
-  src/ftxui/dom/frame.cpp
   src/ftxui/dom/gauge.cpp
   src/ftxui/dom/hbox.cpp
   src/ftxui/dom/inverted.cpp
@@ -24,6 +24,7 @@ add_library(ftxui
   src/ftxui/dom/text.cpp
   src/ftxui/dom/underlined.cpp
   src/ftxui/dom/vbox.cpp
+  src/ftxui/event.cpp
   src/ftxui/screen.cpp
   src/ftxui/screen_interactive.cpp
   src/ftxui/terminal.cpp
diff --git a/ftxui/include/ftxui/component/Event.hpp b/ftxui/include/ftxui/component/Event.hpp
deleted file mode 100644
index 4ce8a77c4424b4ca8258e699ccdbcc215ae2a41f..0000000000000000000000000000000000000000
--- a/ftxui/include/ftxui/component/Event.hpp
+++ /dev/null
@@ -1,34 +0,0 @@
-#ifndef FTXUI_COMPONENT_EVENT
-#define FTXUI_COMPONENT_EVENT
-
-namespace ftxui {
-namespace component {
-
-struct Event{
-  // --- Character ---
-  static Event Character(char);
-
-  // --- Arrow ---
-  static Event Arrow_Left;
-  static Event Arrow_Right;
-  static Event Arrow_Up;
-  static Event Arrow_Down;
-  
-  // --- Other ---
-  static Event Backspace;
-  static Event Delete;
-  static Event Escape;
-  static Event F1, F2, F3, F4, F5, F6, F7, F8, F9, F10, F11, F12;
-
-  // Internal representation.
-  int values [3];
-  Event(int values[3]) : values(values);
-
-};
-
-
-} // namespace component
-} // namespace ftxui
-
-
-#endif /* end of include guard: FTXUI_COMPONENT_EVENT */
diff --git a/ftxui/include/ftxui/component/component.hpp b/ftxui/include/ftxui/component/component.hpp
index 80e77b7e869f2a58bf2683f2d333b042a00001bf..1c575ef8a5483ad4804ba48cf9c0d5300ce9c01f 100644
--- a/ftxui/include/ftxui/component/component.hpp
+++ b/ftxui/include/ftxui/component/component.hpp
@@ -1,8 +1,9 @@
 #ifndef FTXUI_COMPONENT_COMPONENT_HPP
 #define FTXUI_COMPONENT_COMPONENT_HPP
 
-#include "ftxui/dom/elements.hpp"
 #include "ftxui/component/delegate.hpp"
+#include "ftxui/dom/elements.hpp"
+#include "ftxui/event.hpp"
 
 namespace ftxui {
 namespace component {
@@ -20,7 +21,7 @@ class Component {
   virtual dom::Element Render();
 
   // Handle an event. By default, it calls this function on each children.
-  virtual bool Event(int key);
+  virtual bool OnEvent(Event even);
 
   // If this component contains children, this indicates which one is active. It
   // can be none of them.
diff --git a/ftxui/include/ftxui/component/component_direction.hpp b/ftxui/include/ftxui/component/component_direction.hpp
index d71f2ac0e4d96f1199705873c8c046e8e02daa7d..55b99ef84641356a0f0665ef029dc1f57ec57a39 100644
--- a/ftxui/include/ftxui/component/component_direction.hpp
+++ b/ftxui/include/ftxui/component/component_direction.hpp
@@ -10,12 +10,12 @@ namespace component {
 class ComponentDirection : public Component {
  public:
   ComponentDirection(Delegate* delegate);
-  bool Event(int key) override;
+  bool OnEvent(Event) override;
   Component* GetActiveChild() override;
 
  protected:
   void Focus(Component* child);
-  virtual bool HandleDirection(int key) = 0;
+  virtual bool HandleDirection(Event) = 0;
   Component* active_child_;
 };
 
diff --git a/ftxui/include/ftxui/component/component_horizontal.hpp b/ftxui/include/ftxui/component/component_horizontal.hpp
index f518c328b3c124404a1aa22532d1989b27473b85..35dadf2ba2702b6f565773b5eb6bdc3b523ab958 100644
--- a/ftxui/include/ftxui/component/component_horizontal.hpp
+++ b/ftxui/include/ftxui/component/component_horizontal.hpp
@@ -10,8 +10,8 @@ namespace component {
 // It assumes its children are put in the horizontal direction.
 class ComponentHorizontal : public ComponentDirection {
  public:
-  ComponentHorizontal(Delegate* delegate);
-  bool HandleDirection(int key) override;
+  ComponentHorizontal(Delegate*);
+  bool HandleDirection(Event) override;
 };
 
 } // namespace component
diff --git a/ftxui/include/ftxui/component/component_vertical.hpp b/ftxui/include/ftxui/component/component_vertical.hpp
index a8408589c602c61c9e030368e857a9ca176a77d1..22c91f25714e7fa4cc6b20dcd0de17dc580daea6 100644
--- a/ftxui/include/ftxui/component/component_vertical.hpp
+++ b/ftxui/include/ftxui/component/component_vertical.hpp
@@ -10,8 +10,8 @@ namespace component {
 // It assumes its children are put in the vertical direction.
 class ComponentVertical : public ComponentDirection {
  public:
-  ComponentVertical(Delegate* delegate);
-  bool HandleDirection(int key) override;
+  ComponentVertical(Delegate*);
+  bool HandleDirection(Event) override;
 };
 
 } // namespace component
diff --git a/ftxui/include/ftxui/component/input.hpp b/ftxui/include/ftxui/component/input.hpp
new file mode 100644
index 0000000000000000000000000000000000000000..b45256d95b76ba083ac0ee6319214590f1e5ab23
--- /dev/null
+++ b/ftxui/include/ftxui/component/input.hpp
@@ -0,0 +1,35 @@
+#ifndef FTXUI_COMPONENT_INPUT_H_
+#define FTXUI_COMPONENT_INPUT_H_
+
+#include "ftxui/component/component.hpp"
+#include <functional>
+
+namespace ftxui {
+namespace component {
+
+class Input : public Component {
+ public:
+  // Constructor.
+  Input(Delegate*);
+  ~Input() override;
+
+  // State.
+  std::wstring content = L"input";
+  std::wstring placeholder = L"placeholder";
+
+  // State update callback.
+  std::function<void()> on_change = [](){};
+  std::function<void()> on_enter = [](){};
+
+  // Component implementation.
+  dom::Element Render() override;
+	bool OnEvent(Event) override;
+
+ private:
+  int cursor_position = 0;
+};
+
+}  // namespace component
+}  // namespace ftxui
+
+#endif /* end of include guard: FTXUI_COMPONENT_INPUT_H_ */
diff --git a/ftxui/include/ftxui/component/menu.hpp b/ftxui/include/ftxui/component/menu.hpp
index 79dd19f984df6dcfce17bd6df5d6b4f2b01a761b..91aa484ecf6c7e6e9686b0b42f4b5bd5e83a757e 100644
--- a/ftxui/include/ftxui/component/menu.hpp
+++ b/ftxui/include/ftxui/component/menu.hpp
@@ -22,7 +22,7 @@ class Menu : public Component {
 
   // Component implementation.
   dom::Element Render() override;
-	bool Event(int key) override;
+	bool OnEvent(Event) override;
 };
 
 }  // namespace component
diff --git a/ftxui/include/ftxui/component/toggle.hpp b/ftxui/include/ftxui/component/toggle.hpp
index daa18e74fb7bb83d5504fb2246ef0d7523a8b86c..64eded369abef37b03042024414a8a9abadd2d58 100644
--- a/ftxui/include/ftxui/component/toggle.hpp
+++ b/ftxui/include/ftxui/component/toggle.hpp
@@ -22,7 +22,7 @@ class Toggle : public Component {
 
   // Component implementation.
   dom::Element Render() override;
-	bool Event(int key) override;
+  bool OnEvent(Event) override;
 };
 
 }  // namespace component
diff --git a/ftxui/include/ftxui/event.hpp b/ftxui/include/ftxui/event.hpp
new file mode 100644
index 0000000000000000000000000000000000000000..15410d7cc20f9fdb7a4e1e06d7acafa7e1a8f37a
--- /dev/null
+++ b/ftxui/include/ftxui/event.hpp
@@ -0,0 +1,37 @@
+#ifndef FTXUI_EVENT_H_
+#define FTXUI_EVENT_H_
+
+#include <vector>
+#include <array>
+
+namespace ftxui {
+
+struct Event{
+ public:
+  // --- Character ---
+  static Event Character(char);
+
+  // --- Arrow ---
+  static Event ArrowLeft;
+  static Event ArrowRight;
+  static Event ArrowUp;
+  static Event ArrowDown;
+  
+  // --- Other ---
+  static Event Backspace;
+  static Event Delete;
+  static Event Return;
+  static Event Escape;
+  static Event F1, F2, F3, F4, F5, F6, F7, F8, F9, F10, F11, F12;
+
+  bool operator==(const Event& other) { return values == other.values; }
+
+  // Internal representation.
+  std::array<char, 5> values = {0, 0, 0, 0, 0};
+};
+
+
+} // namespace ftxui
+
+
+#endif /* end of include guard: FTXUI_EVENT_H_ */
diff --git a/ftxui/src/ftxui/component/component.cpp b/ftxui/src/ftxui/component/component.cpp
index 369e9c34ea63d861e81397dc568f3f104505a56c..9b40d5940895678e8a72d70a7361a2979d61b13c 100644
--- a/ftxui/src/ftxui/component/component.cpp
+++ b/ftxui/src/ftxui/component/component.cpp
@@ -17,7 +17,7 @@ dom::Element Component::Render() {
   return text(L"Not implemented component");
 }
 
-bool Component::Event(int key) {
+bool Component::OnEvent(Event event) {
   return false;
 }
 
diff --git a/ftxui/src/ftxui/component/component_direction.cpp b/ftxui/src/ftxui/component/component_direction.cpp
index fa77b813c05d59d4d94eb7ebb8eb7e48b9e78c1a..74dc8462fc383f088885593ae6c92dd7a783329f 100644
--- a/ftxui/src/ftxui/component/component_direction.cpp
+++ b/ftxui/src/ftxui/component/component_direction.cpp
@@ -6,17 +6,17 @@ namespace component {
 ComponentDirection::ComponentDirection(Delegate* delegate)
     : Component(delegate), active_child_(nullptr) {}
 
-bool ComponentDirection::Event(int key) {
+bool ComponentDirection::OnEvent(Event event) {
   if (!Focused())
     return false;
 
   if (!active_child_)
     return false;
 
-  if (active_child_->Event(key))
+  if (active_child_->OnEvent(event))
     return true;
 
-  return HandleDirection(key);
+  return HandleDirection(event);
 }
 
 Component* ComponentDirection::GetActiveChild() {
diff --git a/ftxui/src/ftxui/component/component_horizontal.cpp b/ftxui/src/ftxui/component/component_horizontal.cpp
index 012098acf2628437138a9642e1a4d5dda6caa9ea..b9079cc86e4409ca21bdaecb25589fcefae2be05 100644
--- a/ftxui/src/ftxui/component/component_horizontal.cpp
+++ b/ftxui/src/ftxui/component/component_horizontal.cpp
@@ -6,9 +6,9 @@ namespace component {
 ComponentHorizontal::ComponentHorizontal(Delegate* delegate)
     : ComponentDirection(delegate) {}
 
-bool ComponentHorizontal::HandleDirection(int key) {
+bool ComponentHorizontal::HandleDirection(Event event) {
   // Left pressed ?
-  if (key == 68 || key == 'h') {
+  if (event == Event::ArrowLeft || event == Event::Character('h')) {
     Component* previous_sibling = active_child_->PreviousSibling();
     if (previous_sibling) {
       active_child_ = previous_sibling;
@@ -17,7 +17,7 @@ bool ComponentHorizontal::HandleDirection(int key) {
   }
 
   // Left pressed ?
-  if (key == 67 || key == 'l') {
+  if (event == Event::ArrowRight || event == Event::Character('l')) {
     Component* next_sibling = active_child_->NextSibling();
     if (next_sibling) {
       active_child_ = next_sibling;
diff --git a/ftxui/src/ftxui/component/component_vertical.cpp b/ftxui/src/ftxui/component/component_vertical.cpp
index 70d516e760517d17327c8ca8623daabb51bcc0fd..ec0141fbcc27216c80ae74b9239f510fb1050b9a 100644
--- a/ftxui/src/ftxui/component/component_vertical.cpp
+++ b/ftxui/src/ftxui/component/component_vertical.cpp
@@ -6,9 +6,9 @@ namespace component {
 ComponentVertical::ComponentVertical(Delegate* delegate)
     : ComponentDirection(delegate) {}
 
-bool ComponentVertical::HandleDirection(int key) {
+bool ComponentVertical::HandleDirection(Event event) {
   // Up pressed ?
-  if (key == 65 || key == 'k') {
+  if (event == Event::ArrowUp || event == Event::Character('k')) {
     Component* previous_sibling = active_child_->PreviousSibling();
     if (previous_sibling) {
       active_child_ = previous_sibling;
@@ -17,7 +17,7 @@ bool ComponentVertical::HandleDirection(int key) {
   }
 
   // Down pressed ?
-  if (key == 66 || key == 'j') {
+  if (event == Event::ArrowDown || event == Event::Character('j')) {
     Component* next_sibling = active_child_->NextSibling();
     if (next_sibling) {
       active_child_ = next_sibling;
diff --git a/ftxui/src/ftxui/component/input.cpp b/ftxui/src/ftxui/component/input.cpp
new file mode 100644
index 0000000000000000000000000000000000000000..3ed3addd8750f55810cddc95883d57da5c7c5a04
--- /dev/null
+++ b/ftxui/src/ftxui/component/input.cpp
@@ -0,0 +1,46 @@
+#include "ftxui/component/input.hpp"
+#include "ftxui/util/string.hpp"
+
+namespace ftxui {
+namespace component {
+
+Input::Input(Delegate* delegate): Component(delegate) {}
+Input::~Input() {}
+
+// Component implementation.
+dom::Element Input::Render() {
+  bool is_place_ho
+  std::wstring& displayed_text = content.size() ? content : placeholder;
+
+  using namespace dom;
+  if (Focused())
+    return flex(inverted(text(displayed_text)));
+  else
+    return flex(text(displayed_text));
+}
+bool Input::OnEvent(Event event) {
+  std::wstring c;
+
+  // Backspace
+  if (event == Event::Backspace) {
+    if (content.size() != 0)
+      content = content.substr(0, content.size()-1);
+    return true;
+  }
+
+  // Enter
+  if (event == Event::Return) {
+    return true;
+  }
+
+  constexpr char ESC = char(27);
+  if (event.values[0] != ESC) {
+    content += event.values[0];
+    return true;
+  }
+
+  return false;
+}
+
+}  // namespace component
+}  // namespace ftxui
diff --git a/ftxui/src/ftxui/component/menu.cpp b/ftxui/src/ftxui/component/menu.cpp
index 3d5f259ef82237729c2d8f607368b56d30f4df92..ebc5e460fb65d2ec217536ad28e2d968dac4f74d 100644
--- a/ftxui/src/ftxui/component/menu.cpp
+++ b/ftxui/src/ftxui/component/menu.cpp
@@ -1,5 +1,6 @@
 #include "ftxui/component/menu.hpp"
 #include <algorithm>
+#include <iostream>
 
 namespace ftxui {
 namespace component {
@@ -24,14 +25,14 @@ dom::Element Menu::Render() {
   return vbox(std::move(elements));
 }
 
-bool Menu::Event(int key) {
+bool Menu::OnEvent(Event event) {
   if (!Focused())
     return false;
 
   int new_selected = selected;
-  if (key == 65 || key == 'k')
+  if (event == Event::ArrowUp || event == Event::Character('k'))
     new_selected--;
-  if (key == 66 || key == 'j')
+  if (event == Event::ArrowDown || event == Event::Character('j'))
     new_selected++;
   new_selected = std::max(0, std::min(int(entries.size())-1, new_selected));
 
@@ -41,7 +42,7 @@ bool Menu::Event(int key) {
     return true;
   }
 
-  if (key == 10) {
+  if (event == Event::Return) {
     on_enter();
     return true;
   }
diff --git a/ftxui/src/ftxui/component/toggle.cpp b/ftxui/src/ftxui/component/toggle.cpp
index 023ca0ee6c07796df8e8b3c2779eb7137a775a63..2552affd8c92b583d7b6dc80f608595a143558f9 100644
--- a/ftxui/src/ftxui/component/toggle.cpp
+++ b/ftxui/src/ftxui/component/toggle.cpp
@@ -24,16 +24,15 @@ dom::Element Toggle::Render() {
   return hbox(std::move(children));
 }
 
-bool Toggle::Event(int key) {
-
+bool Toggle::OnEvent(Event event) {
   if (activated) {
-    if (key == 67 || key == 'l') {
+    if (event == Event::ArrowRight || event == Event::Character('l')) {
       activated = false;
       on_change();
       return true;
     }
   } else {
-    if (key == 68 || key == 'h') {
+    if (event == Event::ArrowLeft || event == Event::Character('h')) {
       activated = true;
       on_change();
       return true;
diff --git a/ftxui/src/ftxui/event.cpp b/ftxui/src/ftxui/event.cpp
new file mode 100644
index 0000000000000000000000000000000000000000..f4fe123176da83b1ffeb599a4990305b88dae746
--- /dev/null
+++ b/ftxui/src/ftxui/event.cpp
@@ -0,0 +1,37 @@
+#include "ftxui/event.hpp"
+
+namespace ftxui {
+
+constexpr char ESC = char(27);
+
+// --- Character ---
+Event Event::Character(char c) {
+  return Event{c};
+}
+
+// --- Arrow ---
+Event Event::ArrowLeft{ESC, '[', 'D'};
+Event Event::ArrowRight{ESC, '[', 'C'};
+Event Event::ArrowUp{ESC, '[', 'A'};
+Event Event::ArrowDown{ESC, '[', 'B'};
+
+// --- Other ---
+Event Event::Backspace{char(127)};
+Event Event::Delete{ESC, '[', '3', '~'};
+Event Event::Escape{ESC};
+Event Event::Return{char(10)};
+
+Event Event::F1{ESC, '[', 'O', 'P'};
+Event Event::F2{ESC, '[', 'O', 'Q'};
+Event Event::F3{ESC, '[', 'O', 'R'};
+Event Event::F4{ESC, '[', 'O', 'S'};
+Event Event::F5{ESC, '[', '1', '5', '~'};
+Event Event::F6{ESC, '[', '1', '7', '~'};
+Event Event::F7{ESC, '[', '1', '8', '~'};
+Event Event::F8{ESC, '[', '1', '9', '~'};
+Event Event::F9{ESC, '[', '2', '0', '~'};
+Event Event::F10{ESC, '[', '2', '1', '~'};
+Event Event::F11{ESC, '[', '2', '1', '~'};  // Same as F10 ?
+Event Event::F12{ESC, '[', '2', '4', '~'};
+
+} // namespace ftxui
diff --git a/ftxui/src/ftxui/screen_interactive.cpp b/ftxui/src/ftxui/screen_interactive.cpp
index 7d35943183cba3dda64f40dc644b3ec82dd83f4c..3b2d49dd986f1e48a4f8622e5bdf4ef4f2362ca1 100644
--- a/ftxui/src/ftxui/screen_interactive.cpp
+++ b/ftxui/src/ftxui/screen_interactive.cpp
@@ -8,6 +8,20 @@
 
 namespace ftxui {
 
+namespace {
+  constexpr char ESC = char(27);
+
+  Event GetEvent() {
+    char v1 = char(getchar());
+    if (v1 != ESC)
+      return Event{v1};
+
+    char v2 = char(getchar());
+    char v3 = char(getchar());
+    return Event{v1,v2,v3};
+  };
+};
+
 class ScreenInteractive::Delegate : public component::Delegate {
  public:
   Delegate() : root_(this) {}
@@ -29,7 +43,7 @@ class ScreenInteractive::Delegate : public component::Delegate {
     return child;
   }
 
-  void Event(int key) { component_->Event(key); }
+  void OnEvent(Event event) { component_->OnEvent(event); }
 
 
   std::vector<component::Delegate*> children() override {
@@ -77,8 +91,7 @@ void ScreenInteractive::Loop() {
 
   Draw();
   while (!quit_) {
-    int key = getchar();
-    delegate_->Event(key);
+    delegate_->OnEvent(GetEvent());
 
     Clear();
     Draw();
diff --git a/tutorial.md b/tutorial.md
index ca41158aa1faca1593b897352b34b6f97d4be2b0..ad19e5fcdce1cb4acc939dbf4063810d308a67f4 100644
--- a/tutorial.md
+++ b/tutorial.md
@@ -23,6 +23,8 @@ Element bold(Element);
 Element dim(Element);
 Element inverted(Element);
 Element underlined(Element);
+Element color(Color,Element);
+Element bgcolor(Element);
 
 // --- Decorator ---
 Element hcenter(Element);
@@ -139,3 +141,5 @@ Element bold(Element);
 Element dim(Element);
 Element inverted(Element);
 Element underlined(Element);
+Element color(Element);
+Element bgcolor(Element);