Added wide, error, errorText props for textbox

docs/components/textbox.md

@@ -63,6 +63,7 @@ value, v-model| [String, Number] | The model that the textbox value syncs to. Ca
 type        | String  | Supported values are `text`, `password`, `search`, `email`, `url`, `tel`, and `number`. Only applicable when `multiLine` is `false` | `text` | false
 label       | String  | Label for input                         | -       | true
 placeholder | String  | Placeholder for input                   | -       | false
+wide        | Boolean | Whether input is fullwidth or not       | true       | false
 floated     | Boolean | Whether label is floated or not         | false       | false
 disabled    | Boolean | Whether input is disabled or not        | false       | false
 multiLine   | Boolean | If true, then component renders as textarea, otherwise it's input    | false       | false
@@ -74,6 +75,8 @@ min	        | Number	| The min attribute of the textbox input element. Only appl
 max	        | Number  | The max attribute of the textbox input element. Only applicable when the type prop is `number` | None | false
 step	      | [Number, String] | The step attribute of the textbox input element. Only applicable when the type prop is `number`. | 'any' | false
 maxlength |	Number | The maxlength attribute of the input and textarea elements | None | false
+error |	Boolean | Show error state if true | false | false
+error-text |	String | Error text for error state, displaying only when `error` prop is true | None | false
 
 ## Events
 Name          | Params       | Description

src/components/Textbox/main.vue

@@ -1,6 +1,6 @@
 <template>
   <label class="textbox" :class="classes">
-    <div class="textbox__label">{{ label }}</div>
+    <span class="textbox__label">{{ label }}</span>
 
     <input
       v-if="!multiline"
@@ -58,6 +58,8 @@
       class="textbox__textarea"
     ></textarea>
 
+    <span class="textbox__error" v-if="error && errorText">{{ errorText }}</span>
+
   </label>
 </template>
 
@@ -119,6 +121,17 @@ export default {
       type: Boolean,
       default: false,
     },
+    wide: {
+      type: Boolean,
+      default: true,
+    },
+    error: {
+      type: Boolean,
+      default: false,
+    },
+    errorText: {
+      type: String,
+    },
     autocomplete: String,
     autofocus: {
       type: Boolean,
@@ -145,6 +158,8 @@ export default {
       return [
         { 'textbox--floated': this.floated },
         { 'textbox--floated-active': this.floated && this.value !== '' },
+        { 'textbox--wide': this.wide },
+        { 'textbox--error': this.error },
       ];
     },
   },