Input
UI element that allows users to enter and edit text or other data.
Basic Usage
vue
<template>
<spr-input v-model="inputModel" type="text" label="Text Input" placeholder="Enter your username" />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const inputModel = ref('');
</script>Pre Defined Values
vue
<template>
<spr-input v-model="inputModel" type="text" label="Text Input" placeholder="Enter your username" />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const inputModel = ref('Sample Text');
</script>Active State
vue
<template>
<spr-input v-model="inputModel" type="text" label="Text Input" placeholder="Enter your username" active />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const inputModel = ref('');
</script>Error State
vue
<template>
<spr-input v-model="inputModel" type="text" 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 inputModel = ref('');
</script>Disabled State
vue
<template>
<spr-input v-model="inputModel" type="text" label="Text Input" placeholder="Enter your username" :disabled="true" />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const inputModel = ref('');
</script>Min-Max 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.
0/50
Max 3 character allowed
0/3
vue
<template>
<spr-input
v-model="inputModel"
type="text"
label="Text Input"
placeholder="Enter your username"
:min-length="0"
:max-length="50"
show-char-count
/>
<spr-input
v-model="inputModel"
type="text"
label="Text Input"
placeholder="Enter a number"
:max-length="3"
helper-text="Max 3 character allowed"
display-helper
show-char-count
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const inputModel = ref('');
</script>Prefix
vue
<template>
<spr-input v-model="inputModel" type="text" 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 inputModel = ref('');
</script>Trailing Label
minutes
minutes
Name of the user
vue
<template>
<!-- xs -->
<spr-input v-model="inputModel" type="text" label="Offset xs" placeholder="00" offset-size="xs">
<template #trailing> minutes </template>
</spr-input>
<!-- sm -->
<spr-input v-model="inputModel" type="text" label="offset sm" placeholder="00" offset-size="sm">
<template #trailing> minutes </template>
</spr-input>
<!-- md -->
<spr-input v-model="inputModel" type="text" 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 inputModel = 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.
This is a helper message
This is an error message
vue
<template>
<spr-input
v-model="inputModel"
type="text"
label="Text Input"
placeholder="Enter your text"
helper-text="This is a helper message"
display-helper
/>
<spr-input
v-model="inputModel"
type="text"
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 inputModel = ref('');
</script>Alternatively, you can use the helperMessage slot to display a custom helper message.
This is a helper message
This is an error message
vue
<template>
<spr-input v-model="inputModel" type="text" label="Text Input" placeholder="Enter your text">
<template #helperMessage> This is a helper message </template>
</spr-input>
<spr-input v-model="inputModel" type="text" 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 inputModel = ref('');
</script>API Reference
Props
| Name | Description | Type | Default |
|---|---|---|---|
| modelValue | The current value of the input field. This prop is used for v-model binding to enable two-way data binding between the component and parent. | string | number | '' |
| type | Specifies the type of input field, which determines its behavior and validation. Supports all standard HTML input types including:
| string | 'text' |
| id | Unique identifier for the input element. Used for associating the input with a label for accessibility. | string | 'spr-input' |
| label | Text label displayed above the input field to describe its purpose. | string | '' |
| supporting-label | Text beside label that has a supporting style | string | '' |
| placeholder | Hint text displayed inside the input when it's empty, providing guidance on what to enter. | string | '' |
| active | When set to true, the input will appear in its active/focused state even when not actually focused. | boolean | false |
| error | When set to true, displays the input in an error state with error styling. Typically used for validation feedback. | boolean | false |
| disabled | When set to true, makes the input non-interactive and visually indicates its disabled state. | boolean | false |
| readonly | When set to true, makes the input read-only, preventing users from modifying its value, but still allowing focus and selection. | boolean | false |
| minLength | Sets the minimum number of characters allowed in the input. Used for validation. | number | undefined |
| maxLength | Sets the maximum number of characters allowed in the input. Used for validation and with showCharCount to display limits. | number | undefined |
| showCharCount | When set to true, displays a character counter in the bottom right of the input field. When used with maxLength, shows current/max format. | boolean | false |
| offsetSize | Controls the spacing/offset size when using trailing content, affecting the positioning and padding:
| 'xs' | 'sm' | 'md' | 'sm' |
| displayHelper | When set to true, shows the helper text area below the input field. | boolean | false |
| helperText | Text content for the helper message displayed below the input field when displayHelper is true. | string | '' |
| helperIcon | Icon name from Iconify to display alongside the helper text. Particularly useful for warning or error messages. | string | null |
Events
| Name | Description | Parameters |
|---|---|---|
| update:modelValue | Emitted when the input value changes. This event enables v-model binding to work correctly. | (value: string | number): The new value of the input field. |
Slots
| Name | Description |
|---|---|
| prefix | Content to display at the beginning of the input field, typically used for icons or additional decorations. |
| trailing | Content to display at the end of the input field, used for units, additional text, or action buttons. |
| icon | Custom icon content to display inside the input field, particularly useful for custom input types. |
| helperMessage | Custom content for the helper message area, allowing more complex UI than just text and a single icon. |
Product Uses
