@ggwan/input

A collection of customizable input components built with React and shadcn/ui.

Installation

npm install @ggwan/input
# or
yarn add @ggwan/input
# or
pnpm add @ggwan/input

Usage

InputText Component

import { InputText } from '@ggwan/input';

function App() {
  return (
    <div>
      <InputText 
        placeholder="Enter text here..." 
        className="w-full"
      />
    </div>
  );
}

InputNumber Component

import { InputNumber } from '@ggwan/input';

function App() {
  return (
    <div>
      <InputNumber 
        placeholder="Enter number..." 
        min={0}
        max={100}
        step={1}
        className="w-full"
      />
    </div>
  );
}

InputDate Component

import { InputDate } from '@ggwan/input';

function App() {
  return (
    <div>
      <InputDate 
        min="2024-01-01"
        max="2024-12-31"
        className="w-full"
      />
    </div>
  );
}

Base Input Component

import { Input } from '@ggwan/input';

function App() {
  return (
    <div>
      <Input 
        type="email"
        placeholder="Enter email..." 
        className="w-full"
      />
    </div>
  );
}

Components

• Input: Base input component (shadcn/ui Input)
• InputText: Text input component
• InputNumber: Number input component with min/max/step props
• InputDate: Date input component with min/max date props

Props

All components accept standard HTML input props plus:

• className: string - Additional CSS classes
• placeholder: string - Placeholder text
• disabled: boolean - Disable the input

InputNumber specific props:

• min: number - Minimum value
• max: number - Maximum value
• step: number - Step increment (default: 1)

InputDate specific props:

• min: string - Minimum date (YYYY-MM-DD format)
• max: string - Maximum date (YYYY-MM-DD format)

Styling

This component uses Tailwind CSS classes and can be customized by passing additional classes through the className prop.

License

MIT