Input

UI element that allows users to enter and edit text or other data.

Basic Usage

Text Input

<template>
  <spr-input v-model="inputValue" label="Text Input" placeholder="Enter your username" />
</template>

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

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

Pre Defined Values

Text Input

<template>
  <spr-input v-model="inputValue" label="Text Input" placeholder="Enter your username" />
</template>

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

const inputValue = ref('Sample Text');
</script>

Active State

Text Input

<template>
  <spr-input v-model="inputValue" label="Text Input" placeholder="Enter your username" />
</template>

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

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

Error State

Text Input

<template>
  <spr-input v-model="inputValue" label="Text Input" placeholder="Enter your username" :error="true">
    <template #icon>
      <Icon icon="ph:warning-circle-fill" />
    </template>
  </spr-input>
</template>

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

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

Disabled State

Text Input

<template>
  <spr-input v-model="inputValue" label="Text Input" placeholder="Enter your username" :disabled="true" />
</template>

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

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

Min Max Length & Character Count

You can set minimum or maximum length limits by passing props min-length or max-length with the corresponding number value. Additionally, you can enable a character counter display in the bottom right of the input field with the show-char-count prop.

Text Input

0/50

Character Length: 0

Numeric Input

Max 3 digits allowed

0/3

<template>
  <!-- Text input with character count -->
  <spr-input
    v-model="inputValue"
    label="Text Input"
    placeholder="Enter your username"
    :min-length="0"
    :max-length="50"
    show-char-count
  />
  
  <!-- Numeric input with character count and helper -->
  <spr-input
    v-model="numericValue"
    type="number"
    label="Numeric Input" 
    placeholder="Enter a number" 
    :max-length="3"
    helper-text="Max 3 digits allowed" 
    display-helper
    show-char-count
  />
</template>

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

const inputValue = ref('');
const numericValue = ref(0);
</script>

Prefix

Text Input

<template>
  <spr-input v-model="inputValue" label="Text Input" placeholder="Enter your username">
    <template #prefix>
      <Icon icon="ph:warning-circle-fill" />
    </template>
  </spr-input>
</template>

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

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

Trailing Label

Offset xs

minutes

offset sm

minutes

offset md

Name of the user

<template>
  <!-- xs -->
  <spr-input v-model="inputValueXS" label="Offset xs" placeholder="00" offset-size="xs" type="number">
    <template #trailing> minutes </template>
  </spr-input>

  <!-- sm -->
  <spr-input v-model="inputValueSM" label="offset sm" placeholder="00" offset-size="sm" type="number">
    <template #trailing> minutes </template>
  </spr-input>

  <!-- md -->
  <spr-input v-model="inputValueMD" label="offset md" placeholder="Enter your name" offset-size="md">
    <template #trailing> Name of the user </template>
  </spr-input>
</template>

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

const inputValueXS = ref('');

const inputValueSM = ref('');

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

Character Count Display

You can display a character counter in the bottom right of the input field by setting the show-char-count prop to true. When used with max-length, the character count will display in the format "current/max" and will change color to indicate when the maximum length is reached.

Text with Character Count

0/20

<template>
  <spr-input 
    v-model="inputValue" 
    label="Text with Character Count" 
    placeholder="Type to see the counter" 
    :max-length="20" 
    show-char-count 
  />
</template>

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

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

Helper Message

A helper message is a text label below the input field that provides additional information about instructions, formatting hints, validation feedback, etc.

To display the helper message, set the display-helper prop to true and add the helper-text prop with the helper message text. You can also insert an icon with the helper-icon prop. This uses the Iconify icon library.

Text Input

This is a helper message

Text Input

This is an error message

<template>
  <spr-input
    v-model="inputValue"
    label="Text Input"
    placeholder="Enter your text"
    helper-text="This is a helper message"
    display-helper
  />

  <spr-input
    v-model="inputValue"
    label="Text Input"
    placeholder="Enter your text"
    helper-text="This is an error message"
    helper-icon="ph:warning-circle-fill"
    display-helper
    error
  />
</template>

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

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

Alternatively, you can use the helperMessage slot to display a custom helper message.

Text Input

This is a helper message

Text Input

This is an error message

<template>
  <spr-input v-model="inputValue" label="Text Input" placeholder="Enter your text">
    <template #helperMessage> This is a helper message </template>
  </spr-input>

  <spr-input v-model="inputValue" label="Text Input" placeholder="Enter your text" :error="true">
    <template #helperMessage>
      <icon icon="ph:warning-circle-fill" width="20px" height="20px" />
      <span>This is an error message</span>
    </template>
  </spr-input>
</template>

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

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

Input Types

Search Input

Search

<template>
  <spr-input-search v-model="inputValueSearch" label="Search" placeholder="Search ..." />
</template>

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

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

Username Input

Username

<template>
  <spr-input-username v-model="inputValueUsername" label="Username" placeholder="Enter username" />
</template>

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

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

Email Input

Username

<template>
  <spr-input-email v-model="inputValueEmail" label="Username" placeholder="Enter email" />
</template>

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

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

Password Input

Password

<template>
  <spr-input-password v-model="inputValuePassword" label="Password" placeholder="Enter password" />
</template>

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

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

URL Input

URL

https://

<template>
  <spr-input-url v-model="inputValueURL" label="URL" placeholder="Enter url" />
</template>

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

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

Contact Number Input

This component utilizes libphonenumber-js to parse and format the input on blur. Masking of contact number on change will be implemented in the future.

Contact Number

+63

Disabled Calling Country Code

+63

Model Output:

Selected Country Code:

Selected Country Calling Code:

Error Handling: []

Parsed International Number:

Importannt to note:

Since the v-model output is not in an international format (e.g., +63XXXXXXXXXXX), you will need to create a separate function that parses the model output along with the selected country code.

<template>
  <div>
    <div class="spr-grid spr-gap-4">
      <spr-input-contact-number
        v-model="inputValueContactNumber"
        label="Contact Number"
        @get-selected-country-calling-code="handleSelectedCountryCallingCode"
        @get-contact-number-errors="handleContactNumberErrors"
      />
      <spr-input-contact-number
        v-model="inputValueContactNumber"
        label="Disabled Calling Country Code"
        @get-selected-country-calling-code="handleSelectedCountryCallingCode"
        @get-contact-number-errors="handleContactNumberErrors"
        disabledCountryCallingCode
      />
    </div>
    <p>Model Output: {{ inputValueContactNumber }}</p>
    <p>Selected Country Code: {{ selectedCountryCode }}</p>
    <p>Selected Country Calling Code: {{ selectedCountryCallingCode }}</p>
    <p>Error Handling: {{ contactNumberErrors }}</p>
    <p>Parsed International Number: {{ parseInternationalNumber }}</p>
  </div>

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

    const inputValueContactNumber = ref('');
    const selectedCountryCode = ref('');
    const selectedCountryCallingCode = ref('');
    const contactNumberErrors = ref([]);

    const handleSelectedCountryCallingCode = (value: string) => {
      selectedCountryCode.value = value.countryCode;
      selectedCountryCallingCode.value = value.countryCallingCode;
    };

    const handleContactNumberErrors = (errors: { title: string; message: string }[]) => {
      contactNumberErrors.value = errors;
    };

    const handleContactNumberErrors = (errors: { title: string; message: string }[]) => {
      contactNumberErrors.value = errors;
    };

    const parseInternationalNumber = computed(() => {
      if (inputValueContactNumber.value) {
        const formattedNumber = `+${selectedCountryCallingCode.value}${inputValueContactNumber.value.replace(/[^0-9]/g, '')}`;

        return formattedNumber;
      }

      return '';
    });
  </script>
</template>

Set Pre Selected Country

Contact Number

+63

<div class="spr-mt-3">
  <spr-input-contact-number
    v-model="inputValue"
    label="Contact Number"
    pre-selected-country-code="US"
  />
</div>

Dropdown Input

This is the one used in the dropdown component. If you want to implement a dropdown, you can refer to the Dropdown Component.

Dropdown Input

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

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

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

API Reference

Name	Description	Type	Default
v-model	Two-way binding for the input value.	string | number	-
label	The label for the input field.	string	-
placeholder	Placeholder text for the input field.	string	-
pre-value	Predefined value for the input, used when v-model is not set.	string | number	-
active	Determines if the input is in an active state.	boolean	false
error	Sets the input to an error state.	boolean	false
disabled	Disables the input field.	boolean	false
min-length	Minimum length of the input value. Applied as an HTML attribute.	number	-
max-length	Maximum length of the input value. When used with show-char-count, displays the limit in the character counter.	number	-
offset-size	Size of the offset for the input field, can be xs, sm, md, etc.	string	sm
display-helper	Whether to display the helper message.	boolean	false
helper-text	Text for the helper message below the input field.	string	-
helper-icon	Icon to display alongside the helper message.	string	-
show-char-count	Shows character count in the bottom right of the input field. When used with max-length, displays in the format "current/max" and changes color when limit is reached.	boolean	false

Product Uses