Components

SearchField

Form field component for searching through input text.

Component

View code

Show playground

Label

Help text example

Props

Props	Required	Default	Type
`id`	`true`	—	`string`
`label`	—	—	`string`
`placeholder`	—	`'Placeholder'`	`string`
`helpText`	—	—	`string`
`helpTextPosition`	—	`Position.BOTTOM`	`Position`
`icon`	—	`'mdi:magnify'`	`string`
`size`	—	`'md'`	`InputSize`
`modelValue`	—	`''`	`string \| number \| null`
`maxLength`	—	—	`number`
`filterAlphabetic`	—	—	`boolean`
`readonly`	—	—	`boolean`
`autocomplete`	—	`'off'`	`string`
`autofocus`	—	`false`	`boolean`
`disabled`	—	`false`	`boolean`
`inputCustomClass`	—	—	`string`
`clearAriaLabel`	—	`'Clear search'`	`string`
`transparent`	—	`false`	`boolean`
`inputClass`	—	—	`string`

Usage

id

Sets the id of the field.

 <template>
    <SearchField id="field-id" />
</template>

Type: string
Required: true

label

Sets the label of the field.

 <template>
    <SearchField label="Label text" />
</template>

Type: string

placeholder

Sets the placeholder text of the search field.

 <template>
    <SearchField placeholder="Placeholder" />
</template>

Type: string
Default: 'Placeholder'

helpText

Sets the help text displayed below the search field.

 <template>
    <SearchField helpText="Help text example" />
</template>

Type: string

helpTextPosition

Sets the position of the help text relative to the field. It uses the Position enum.

 <template>
    <SearchField helpTextPosition="top" helpText="Appears above the field" />
</template>

Type: Position
Default: Position.BOTTOM

Options

Value	Description
`TOP`	top
`BOTTOM`	bottom

icon

Sets the icon of the search field.

 <template>
    <SearchField icon="mdi:magnify" />
</template>

Type: string
Default: 'mdi:magnify'

size

Sets the size of the search field. It uses the InputSize enum.

 <template>
    <SearchField :size="InputSize.MD" />
</template>

Type: InputSize
Default: InputSize.MD

Options

Value	Description
`MD`	md
`LG`	lg

modelValue

Sets the value of the search field.

 <template>
    <SearchField v-model="inputValue" />
</template>
<script setup lang="ts">
const inputValue = ref('')
</script>

Type: string
Default: ''

maxLength

Sets the maximum length of the search field.

 <template>
    <SearchField :maxLength="10" />
</template>

Type: number

filterAlphabetic

Sets whether to filter alphabetic characters in the search field.

 <template>
    <SearchField filterAlphabetic />
</template>

Type: boolean
Default: false

readonly

Sets the readonly state of the field.

 <template>
    <SearchField readonly />
</template>

Type: boolean
Default: false

autocomplete

Sets the autocomplete attribute of the search field.

 <template>
    <SearchField autocomplete="on" />
</template>

Type: string
Default: 'off'

autofocus

Sets the autofocus state of the field.

 <template>
    <SearchField autofocus />
</template>

Type: boolean
Default: false

disabled

Sets the disabled state of the field.

 <template>
    <SearchField disabled />
</template>

Type: boolean
Default: false

inputCustomClass

Sets a custom class for the input element.

 <template>
    <SearchField inputCustomClass="my-custom-class" />
</template>

Type: string

clearAriaLabel

The clearAriaLabel prop sets the accessible label for the clear search button. Override it for i18n.

 <template>
    <SearchField clearAriaLabel="Borrar busqueda" />
</template>

Type: string
Default: 'Clear search'

transparent

When true, removes the default bg-background-container-surface background from the search input container, making it transparent.

 <template>
    <SearchField transparent />
</template>

Type: boolean
Default: false

inputClass

Applies additional CSS classes directly to the <input> element, appended last so they can override other classes.

 <template>
    <SearchField inputClass="text-right" />
</template>

Type: string