Input

Display an input field.

Usage

Use a v-model to make the Input reactive.

<script setup>
import {ref} from 'vue'

const value = ref('')
</script>

<template>
  <s-input v-model="value"/>
</template>

Style

Use the color and variant props to change the visual style of the Input.

<template>
  <s-input color="primary" variant="outline" />
</template>

Besides all the colors from the ui.colors object, you can also use the white (default) and gray colors with their pre-defined variants.

Size

Use the size prop to change the size of the Input.

<template>
  <s-input size="sm" />
</template>

Placeholder

Use the placeholder prop to set a placeholder text.

<template>
  <s-input placeholder="Search..." />
</template>

Icon

Use any icon from Iconify by setting the icon prop by using this pattern: * *i-{collection_name}-{icon_name}**.

Use the leading and trailing props to set the icon position or the leading-icon and trailing-icon props to set a different icon for each position.

<template>
  <s-input icon="i-heroicons-magnifying-glass-20-solid" size="sm" color="white" :trailing="false" />
</template>

Disabled

Use the disabled prop to disable the Input.

<template>
  <s-input :disabled="true" />
</template>

Loading

Use the loading prop to show a loading icon and disable the Input.

Use the loading-icon prop to set a different icon or change it globally in ui.input.default.loadingIcon. Defaults to i-heroicons-arrow-path-20-solid.

<template>
  <s-input :loading="true" icon="i-heroicons-magnifying-glass-20-solid" />
</template>

Slots

leading

Use the #leading slot to set the content of the leading icon.

<template>
  <s-input>
    <template #leading>
      <s-avatar src="https://avatars.githubusercontent.com/u/2556185?v=4" size="3xs" />
    </template>
  </s-input>
</template>

trailing

Use the #trailing slot to set the content of the trailing icon.

EUR

<template>
  <s-input>
    <template #trailing>
      <span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
    </template>
  </s-input>
</template>

You can for example create a clearable Input by injecting a Button in the trailing slot that displays when some text is entered.

<script setup lang="ts">
import {ref} from 'vue'

const q = ref('')
</script>

<template>
  <s-input v-model="q" name="q" placeholder="Search..." icon="icon-[heroicons--magnifying-glass-20-solid]" :ui="{ icon: { trailing: { pointer: '' } } }">
    <template #trailing>
      <s-button
          v-show="q !== ''"
          color="gray"
          variant="link"
          icon="icon-[heroicons--x-mark-20-solid]"
          :padded="false"
          @click="q = ''"
      />
    </template>
  </s-input>
</template>

As leading and trailing icons are wrapped around a pointer-events-none class, if you inject a clickable element in the slot, you need to remove this class to make it clickable by adding :ui="{ icon: { trailing: { pointer: '' } } }" to the Input.