Input

Basic input

Value: ""

<script setup>
import { ref } from 'vue'
const value = ref('')
</script>

<template>
  <FuiInput v-model="value" placeholder="Enter text..." />
</template>

Sizes

<FuiInput v-model="value" size="small" placeholder="Small" />
<FuiInput v-model="value" size="medium" placeholder="Medium" />
<FuiInput v-model="value" size="large" placeholder="Large" />

States

<FuiInput placeholder="Disabled" disabled />
<FuiInput placeholder="Read only" readonly />
<FuiInput placeholder="Invalid input" invalid />

Prefix / Suffix icons

<FuiInput placeholder="Search...">
  <template #contentBefore>
    <svg><!-- search icon --></svg>
  </template>
</FuiInput>

<FuiInput placeholder="https://example.com">
  <template #contentBefore>
    <svg><!-- globe icon --></svg>
  </template>
  <template #contentAfter>
    <svg><!-- edit icon --></svg>
  </template>
</FuiInput>

Props

Prop	Type	Default	Description
modelValue	string	''	v-model value
placeholder	string	''	Placeholder text
disabled	boolean	false	Disabled state
readonly	boolean	false	Read-only state
invalid	boolean	false	Error state
size	small | medium | large	medium	Input size

Slots

Slot	Description
contentBefore	Icon before input
contentAfter	Icon after input