3 files changed, 51 insertions, 1 deletions

diff --git a/tpl/index.pug b/tpl/index.pug
index 47dbc55..7dab86f 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -6,6 +6,7 @@ include layouts/container.pug
 include objects/heading.pug
 include objects/rule.pug
 include objects/button.pug
+include objects/text-field.pug
 
 mixin box 
     +container(padX=true padY=true inPage=true theme="raised")
@@ -21,7 +22,7 @@ html
         link(rel="stylesheet" href="style.css")
         script(src="script.js")
 
-    body(class='t-lighter')
+    body
         +container(padX=true padY=true narrow=true)
 
             +h1-heading(level='xl')= 'Heading'
@@ -91,3 +92,32 @@ html
                 +a-button(variant='secondary' outline=true)= 'Button'
                 = ' '
                 +a-button(variant='secondary' outline=true disabled=true)= 'Button'
+
+            //-----------------------------------------
+
+            +h1-heading(level='xl')= 'Text field'
+            +rule(level='medium')
+
+            +box
+                +text-field(placeholder='Placeholder')
+                br
+                br
+                +text-field(value='Just landed in L.A.')
+                br
+                br
+                +text-field(value='Readonly' readonly=true)
+                br
+                br
+                +text-field(value='Incorrect input' pattern='a+' required=true)
+                br
+                br
+                +text-field(placeholder='Placeholder' disabled=true)
+                br
+                br
+                +text-field(value='Just landed in L.A.' disabled=true)
+                br
+                br
+                +text-field(value='Readonly' readonly=true disabled=true)
+                br
+                br
+                +text-field(value='Incorrect input' pattern='a+' required=true disabled=true)
diff --git a/tpl/objects/icon.pug b/tpl/objects/icon.pug
new file mode 100644
index 0000000..a77a3ed
--- /dev/null
+++ b/tpl/objects/icon.pug
@@ -0,0 +1,7 @@
+mixin icon(id)
+  -
+    let href    = '../node_modules/iro-icons/src/icons/' + id + '.svg'
+    let classes = attributes.class ? attributes.class : ''
+
+  svg(class=['o-icon', 'o-icon--iro', 'o-icon--iro-' + id, classes] width='1em' height='1em')
+    use(xlink:href=href)
diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug
new file mode 100644
index 0000000..9bbe0a1
--- /dev/null
+++ b/tpl/objects/text-field.pug
@@ -0,0 +1,13 @@
+include icon.pug
+
+mixin text-field
+  -
+    let classes = {
+      'o-text-field': true,
+      'is-invalid':   attributes.invalid,
+      'is-disabled':  attributes.disabled,
+    }
+
+  div(class=classes)
+    input(class='o-text-field__input')&attributes(attributes)
+    .o-text-field__bg