<script setup>
import Input from "~/components/ui/Input.vue"
</script>

# Input

Inputs are areas in which users can enter information. In Funkwhale, these mostly take the form of search fields.

| Prop | Data type | Required? | Description |
| ---- | --------- | --------- | ----------- |

|
| `placeholder` | String | No | The placeholder text that appears when the input is empty. |
| `icon` | String | No | The [Bootstrap icon](https://icons.getbootstrap.com/) to show on the input. |
| `v-model:value` | String | Yes | The text entered in the input. |

## Input model

You can link a user's input to form data by referencing the data in a `v-model` directive.

```vue-html{2}
<Input v-model="value" placeholder="Search" />
```

<Input placeholder="Search" />

## Input icons

Add a [Bootstrap icon](https://icons.getbootstrap.com/) to an input to make its purpose more visually clear.

```vue-html{3}
<Input v-model="value" icon="bi-search" placeholder="Search" />
```

<Input icon="bi-search" placeholder="Search" />

## Input-right slot

You can add a template on the right-hand side of the input to guide the user's input.

```vue-html{2-4}
<Input v-model="value" placeholder="Search">
  <template #input-right>
    suffix
  </template>
</Input>
```

<Input placeholder="Search">
  <template #input-right>
    suffix
  </template>
</Input>
