> 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/slots.md).

# Slots

**Slots** are a mechanism for Vue components that allows you to compose your components and to **inject content** into a child component, by passing template code. 

### Signature of Slots

```markup
<!-- FORM #slot-[top|bottom]-[formbase-id || 'form-base']-->
  <template #slot-top-my-form="{id, index, obj}"></template>

  <!-- KEY #slot-[top|bottom|item]-key-[formbase ID]-[path key] -->
  <template #slot-top-key-my-form-name="{id, index, obj}"></template>
  <template #slot-bottom-key-my-form-controls-check></template>

  <!-- TYPE #slot-[top|bottom|item]-type-[formbase ID]-[type of control]-->
  <template #slot-top-type-my-form-checkbox="{id, index, obj}"></template>

  <!-- 
    INJECT specific slot into exposed slot of vuetify control  
    #slot-inject-[slot to inject into control]-key-[formbase ID]-[path key]
  -->
  <template #slot-inject-label-key-my-form-name="{id, index, obj}">
  
  <!-- TOOLTIP #slot-tooltip to activate you must have schema prop tooltip -->
  <template #slot-tooltip="{id, index, obj}">
```

Schema which is used in the following examples

```javascript
mySchema: {
  name: { type: 'text' },
  fileinput: { type: 'file' }
  controls: {
    check: { type:'checkbox'}
  }
}
```

### Form-Base Slots

Signature

```markup
<template #slot-['top'|'bottom']-[formbase ID || 'form-base'] >
...
</template>
```

Example

```markup
<v-form-base
  id="my-form"
  :model="myModel"
  :schema="mySchema"
  @input="inputHandler"
>
  <!-- TOP at FORM -->
  <template #slot-top-my-form>
    <h4 >Top Slot of 'Form'</h4>
  </template>
  <!-- BOTTOM at FORM -->
  <template #slot-bottom-my-form>
    <h4>Bottom Slot of 'Form'</h4>  
  </template>

</v-form-base>
```

### Key Slots&#x20;

Signature

```markup
<template 
  #slot-['top'|'bottom'|'item']-key-[formbase ID]-[path-key]={obj,id,index}  
>
...
</template>
```

Example

```markup
<v-form-base
  :model="myModel"
  :schema="mySchema"
  @input="inputHandler"
>  
  <!-- TOP of KEY -->
  <template #slot-top-key-form-base-name="{obj}">
    <h4>Slot at Top of Key '{{obj.key}}'</h4>
  </template>
  <!-- ITEM of KEY -->
  <template #slot-item-key-form-base-name="{id, index, obj}">
    <h4>
      <div>Formbase ID: {{id}}</div>
      <div>Index of Component: {{index}}</div>
      <div>Current Object:{{obj}}</div>
    </h4>
  </template>
  <!-- BOTTOM of KEY -->
  <template #slot-bottom-key-form-base-controls-check="{obj}">
    <h4>Slot at Bottom with Key '{{obj.key}}'</h4>
  </template>      
  
</v-form-base>
```

### Type Slots

Signature

```markup
<template 
  #slot-['top'|'bottom'|'item']-type-[formbase ID]-[type of control]={obj,id,index} 
>
...
</template>
```

Example

```markup
<v-form-base
  :model="myModel"
  :schema="mySchema"
  @input="inputHandler"
>

<!-- TYPE SLOTS -->
  <template #slot-bottom-type-form-base-checkbox="{obj}">
    <h4>Slot at Bottom of Type 'Checkbox' - {{obj.value}</h4>
  </template>

</v-form-base>
```

### Array Slots

Signature

```markup
<template 
  #slot-['top'|'bottom'|'item']-array-[formbase ID]-[key of Array]={obj,id,index,idx,item} 
>
...
</template>
```

See this live in [Array-Slot-Example](https://wotamann.github.io/arrayslot)

```javascript
mySchema: {
  tasks: {
    type: 'array',
    schema: {
      task: { type: 'text' },
      done: { type: 'checkbox'}
    }
  }
}
```

```markup
<v-form-base
  :model="myModel"
  :schema="mySchema"
  @input="inputHandler"
>

  <template #slot-top-array-form-base-tasks="{obj, idx, item}">
    <div>{{idx}} - Slot at Top of each Item in Array '{{obj.key}}'</div>
  </template>
  <template #slot-bottom-array-form-base-tasks="{obj}">
    <div>{{idx}} -Slot at Bottom of each Item in Array '{{obj.key}}'</div>
  </template>
        
</v-form-base>
```

### Inject Slot into Vuetify Control

Signature

```markup
<!-- vslot = slot in vuetify-control -->
<template 
  #slot-inject-[vslot]-key-[formbase ID]-[path-key]={obj,id,index,...vslot} 
>
...
</template>
```

Simple Example

```markup
<v-form-base id="my-form" :model="myModel" :schema="mySchema" @input="inputHandler" >

  <!-- 
    inject this slot via key fileinput at form-base 
    into 'selection'-slot of v-file-input
  -->
  <template #slot-inject-selection-key-form-base-fileinput="{text}">
    <v-chip small label color="blue">
      {{ text }}
    </v-chip>
  </template>
   
</v-form-base>    
```

See this live in [Slot-Example](https://wotamann.github.io/slots)

```markup
<v-form-base
  :model="myModel"
  :schema="mySchema"
  @input="inputHandler"
>
        
<!-- INJECT SLOTS INTO KEY  -->  
  <!-- INJECT progress into key -->
  <template #slot-inject-progress-key-form-base-nameSlot="">
    <v-progress-linear
      :value="progress"
      :color="color"
      absolute
      height="9"
    />
  </template>
  <!-- INJECT selection into file input -->
  <template #slot-inject-selection-key-form-base-fileSlot="{text}">
    <v-chip small label color="blue">
      {{ text }}
    </v-chip>
  </template>
  <!-- INJECT append -->
  <template #slot-inject-append-key-form-base-colorSlot="{obj}" >
    <h4 class="slot"><v-icon :color="obj.value">palette</v-icon>Key-Slot</h4>
  </template>
  <!-- INJECT label -->
  <template #slot-inject-label-key-form-base-controls-switch="{obj}">
    <span class="slot-label">Label <b>Slot of Key</b> '{{obj.key}}'</span>
  </template>
  <!-- INJECT label -->
  <template #slot-inject-label-key-form-base-controls-radio="{option}">
     <v-chip small label color="blue">
       Slot-{{option}}
     </v-chip>
  </template>

  <!-- inject slots into key controls-slider -->
  <template #slot-inject-label-key-form-base-controls-slider>
    <strong class="blue--text">Slot</strong>
  </template>         
  <template #slot-inject-prepend-key-form-base-controls-slider>
    <v-icon color="blue">menu</v-icon>
  </template> 

</v-form-base>
```

### Tooltip Slots

see in [Section Tooltips](/vuetify-form-base/schema/tooltips.md)

### [Slot-Example](https://wotamann.github.io/slots)

### [Array-Slot-Example](https://wotamann.github.io/arrayslot)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://wotamann.gitbook.io/vuetify-form-base/schema/slots.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.