Dropdown Input

Input styled variant primarily used as trigger/display inside dropdown-based components.

Basic Usage

Input Dropdown

<template>
  <spr-input-dropdown
    id="input-dropdown-basic"
    v-model="inputModel"
    label="Input Dropdown"
    placeholder="Select an item ..."
    readonly
  />
</template>

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

const inputModel = ref('');
</script>

Active State

Input Dropdown

<template>
  <spr-input-dropdown
    id="input-dropdown-active-state"
    v-model="inputModel"
    label="Input Dropdown"
    placeholder="Select an item ..."
    active
    readonly
  />
</template>

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

const inputModel = ref('');
</script>

Error State

Input Dropdown

API Reference

This username input shares the same props, events, slots, and validation behavior as the base Input component. Refer to the canonical API documentation here:

Input Component API Reference

Only the visual intent (username context) differs; no additional props or unique events are introduced at this time.

<template>
  <spr-input-dropdown
    id="input-dropdown-error-state"
    v-model="inputModel"
    label="Input Dropdown"
    placeholder="Select an item ..."
    error
    readonly
  >
    <template #icon>
      <Icon icon="ph:warning-circle-fill" />
    </template>
  </spr-input-dropdown>
</template>

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

const inputModel = ref('');
</script>

Disabled State

Input Dropdown

<template>
  <spr-input-dropdown
    id="input-dropdown-disabled-state"
    v-model="inputModel"
    label="Input Dropdown"
    placeholder="Select an item ..."
    disabled
  />
</template>

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

const inputModel = ref('');
</script>