# Text-Field & Input

## Text-field

```javascript
  // Textfield - Text:  
  schema: { 
    ctrlShort: 'text',  // shorthand definition
    ctrl: { type:'text', ...} 
  }
  // Textfield - Password: 
  schema: { 
    ctrlShort: 'password',  // shorthand definition
    ctrl: { type:'password', ...} 
  }
  // Textfield - Email: 
  schema: { 
    ctrlShort: 'email',  // shorthand definition
    ctrl: { type:'email', ...} 
  }
  // Textfield - Number:
  schema: { 
    ctrlShort: 'number',  // shorthand definition
    ctrl: { type:'number', ...} 
  }  
```

Text Example

```markup
<v-text-field 
    label="Search"
    hint="Books" 
    prepend-icon="search"  
    clearable
/>
```

```javascript
// Properties from <v-text-field> used in Schema
schema: { 
  myTextField: { 
    type:'text', 
    label:'Search', 
    hint:'Books', 
    prependIcon:'search', // camelcase -> 
    clearable:true 
  } 
}
```

### [Info to Vuetify-Textfield API](https://vuetifyjs.com/en/api/v-text-field/#props)&#x20;

### [Example](https://wotamann.github.io/simple)

## Native HTML \<Input> Type

Use different types for the HTML `<input>` element. Property **`ext`** in combination with type **`text`**&#x6D;ake the native [HTML`<input>`Type](https://www.w3schools.com/tags/att_input_type.asp) accessable.

```javascript
mySchema:{    
  range:{ 
    type:'text', 
    ext:'range' // <----- EXT
  },
  color:{ 
    type:'text', 
    ext:'color',
    prependIcon: 'palette', 
    label:'Color'
  },    
  date:{ 
    type:'text', 
    ext:'date', 
    locale:'en',
    prependIcon: 'event', 
    label:'Date'
  },
  time:{ 
    type:'text', 
    ext:'time', 
    format:'24h',
    prependIcon: 'timer', 
    label:'Time'
  }
}
```

### [Example](https://wotamann.github.io/textfields)

## File-Input:

```javascript
schema: { 
    ctrlShort: 'file',
    ctrl: { type:'file', ...}
}
```

### [Info to Vuetify File-Input](https://vuetifyjs.com/en/components/file-inputs/)

## Textarea:

```javascript
schema: { 
    ctrlShort: 'textarea',
    ctrl: { type:'textarea', ...}
}
```

### [Info to Vuetify Textarea](https://vuetifyjs.com/en/components/textarea/)