example: input error msg

example/components/todo/input/index.js

@@ -4,24 +4,42 @@ const TodoInput = {
   name: 'todo-input',
   template: html`
     <div>
-      <input type="text" />
-      <button id="add-btn">Add</button>
+      <div>
+        <input type="text" />
+        <button id="add-btn">Add</button>
+      </div>
+      <span o-text="error"></span>
     </div>
   `,
   state: {
     text: '',
+    error: '',
   },
   setup({ query, state, parent }) {
     const input = query('input')
     const btn = query('#add-btn')
+    const error = query('[o-text="error"]')
+
+    const { show, hide } = error.if({ initial: false })
 
     input.on('input', function () {
       state.text = input.value
     })
 
     btn.on('click', function () {
+      if (state.text === '') {
+        state.error = 'Please enter a todo'
+        show()
+
+        return
+      }
+
+      hide()
+
       parent.events.add(state.text)
+
       state.text = ''
+      input.value = ''
     })
   },
 }