A collection of smart, type-safe input components for Vue.js that provides automatic formatting, validation, and internationalization support. Built to make form input handling both powerful and developer-friendly.
ts-inputs comes with the following powerful features:
-
🎯 Smart Input Components
- Credit Card formatting with automatic card type detection
- Date formatting with customizable patterns
- Time formatting with 12h/24h support
- Numerical formatting with thousand/lakh grouping
- Google Places autocomplete integration
-
💪 Type Safety
- Full TypeScript support
- Type-safe props and events
- Intelligent autocompletion
-
🌈 Developer Experience
- Simple Vue.js integration
- Customizable formatting options
- Automatic validation
- Internationalization support
- Modern and clean UI
# Install using your preferred package manager
npm install ts-inputs
# or
yarn add ts-inputs
# or
pnpm add ts-inputsBasic usage example:
<script setup lang="ts">
import { CreditCardInput, DateInput, NumeralInput, TimeInput } from 'ts-inputs'
const cardNumber = ref('')
const date = ref('')
const time = ref('')
const number = ref('')
</script>
<template>
<CreditCardInput v-model="cardNumber" placeholder="Enter card number" />
<DateInput v-model="date" pattern="YYYY-MM-DD" />
<TimeInput v-model="time" format="24h" />
<NumeralInput v-model="number" thousand-group-style="thousand" />
</template>bun testPlease see our releases page for more information on what has changed recently.
Please see CONTRIBUTING for details.
For help, discussion about best practices, or any other conversation that would benefit from being searchable:
For casual chit-chat with others using this package:
Join the Stacks Discord Server
“Software that is free, but hopes for a postcard.” We love receiving postcards from around the world showing where Stacks is being used! We showcase them on our website too.
Our address: Stacks.js, 12665 Village Ln #2306, Playa Vista, CA 90094, United States 🌎
We would like to extend our thanks to the following sponsors for funding Stacks development. If you are interested in becoming a sponsor, please reach out to us.
The MIT License (MIT). Please see LICENSE for more information.
Made with 💙
