SearchBox

Basic

Value: ""

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

<template>
  <FuiSearchBox v-model="value" placeholder="Search..." />
</template>

Appearance

<FuiSearchBox v-model="value" appearance="outline" placeholder="Search..." />
<FuiSearchBox v-model="value" appearance="filled-darker" placeholder="Search..." />

Size

<FuiSearchBox v-model="value" size="small" />
<FuiSearchBox v-model="value" size="large" />

Props

Prop	Type	Default	Description
modelValue	string	''	Input value
placeholder	string	''	Placeholder text
appearance	outline | filled-darker | filled-lighter	outline	Visual style
size	small | medium | large	medium	Input size
disabled	boolean	false	Disabled state
readonly	boolean	false	Read-only state