# 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](https://wotamann.gitbook.io/vuetify-form-base/schema/tooltips)

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

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


---

# Agent Instructions: 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:

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

The question should be specific, self-contained, and written in natural language.
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.