> For the complete documentation index, see [llms.txt](https://wotamann.gitbook.io/vuetify-form-base/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wotamann.gitbook.io/vuetify-form-base/schema/from-schema-to-component.md).

# From Schema to Component

### Vuetify Component Attribute - Schema Property

How does schema properties correspond to the Vuetify component attributes? Props in Vuetify-Controls in **kebab-case** must be converted to **camelCase** in Schema-Definition. 

```javascript
  schema: { 
    name: { 
      type:'text', 
      backgroundColor:'red', 
      clearable:true 
    }  
  }
```

type 'text' maps to component \<v-text-field>

```markup
	<v-text-field background-color="red" clearable=true></v-text-field>
```

another example

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

```javascript
// schema properties corresponds to attributes in <v-text-field> 
schema: { 
  myTextField: { 
    type:'text', 
    label:'Search', 
    hint:'Books', 
    prependIcon:'search', // camelCase 
    clearable:true 
  } 
}
```

complex example

```javascript
// Partials Functions for Rules
const minLen = l => v => (v && v.length >= l) || `min. ${l} Characters`
const maxLen = l => v => (v && v.length <= l) || `max. ${l} Characters`

//...
schema: {
    password: { 
        type: 'password', 
        label: 'Password', 
        hint:'Between 6-12 Chars', 
        appendIcon: 'visibility', 
        counter: 12, 
        rules: [ minLen(6), maxLen(12) ], 
        clearable: true, 
        col: 12 
    }
} 
```

###

###