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

# component

The `component` property can refer to any [Vue component](https://vuejs.org/v2/guide/components.html) or [HTML element tag name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element).

```javascript
// Option 1 - HTML element tag
data() {
  return {
    uiSchema: [{
      component: 'div'
    }]
  }
}
```

```javascript
// Option 2 - Globally registered component
data() {
  return {
    uiSchema: [{
      component: 'my-custom-component'
    }]
  }
}
```

```javascript
// Option 3 - component object
import MyCustomComponent from './my-custom-component'

...

data() {
  return {
    uiSchema: [{
      component: MyCustomComponent
    }]
  }
}
```

```javascript
// Option 4 - Component from components prop
import MyCustomComponent from './my-custom-component'

...

data() {
  return {
    components: {
      MyCustomComponent
    },
    uiSchema: [{
      component: 'MyCustomComponent'
    }],
    model: { ... },
    schema: { ... }
  }
}

....

<template>
  <vue-form-json-schema
    v-model="model"
    :components="components"
    :ui-schema="uiSchema"
    :schema="schema"
  />
</template>
```