Getting Started

Hero Tel Input depends on Tailwind CSS Please ensure Tailwind CSS is set up in your project before using Hero Tel Input.

When using Tailwind v4, add them to your CSS:


@import 'tailwindcss';
@plugin "tailwindcss-react-aria-components";
@plugin "tailwindcss-animate";

When using Tailwind v3, add the plugins to your tailwind.config.js instead:


module.exports = {
  // ...
  plugins: [
    require('tailwindcss-react-aria-components'),
    require('tailwindcss-animate'),
  ],
};

Installation


npm install @hyperse/hero-tel-input


pnpm add @hyperse/hero-tel-input


yarn add @hyperse/hero-tel-input


bun add @hyperse/hero-tel-input

Usage


import { HeroTelInput } from '@hyperse/hero-tel-input';
 
const MyComponent = () => {
  const [phone, setPhone] = React.useState('');
 
  const handleChange = (newPhone: string, info: HeroTelInputInfo) => {
    setPhone(newPhone);
  };
 
  return <HeroTelInput value={phone} onChange={handleChange} />;
};

Example

Congratulations!

That’s all, now let’s deep dive into the props.