> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devreadykit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Input

> A flexible input component with support for text, number, and password types

export const ContactFormExample = () => <div className="not-prose">
    <iframe src="https://kerny-custom.vercel.app/preview/ContactFormExample" frameBorder="0" width="100%" height="320" />
  </div>;

export const InputStates = () => <div className="not-prose">
    <iframe src="https://kerny-custom.vercel.app/preview/InputStates" frameBorder="0" width="100%" height="320" />
  </div>;

export const InputValidationStates = () => <div className="not-prose">
    <iframe src="https://kerny-custom.vercel.app/preview/InputValidationStates" frameBorder="0" width="100%" height="360" />
  </div>;

export const InputWithIcons = () => <div className="not-prose">
    <iframe src="https://kerny-custom.vercel.app/preview/InputWithIcons" frameBorder="0" width="100%" height="320" />
  </div>;

export const InputWithLabels = () => <div className="not-prose">
    <iframe src="https://kerny-custom.vercel.app/preview/InputWithLabels" frameBorder="0" width="100%" height="360" />
  </div>;

export const InputTypes = () => <div className="not-prose">
    <iframe src="https://kerny-custom.vercel.app/preview/InputTypes" frameBorder="0" width="100%" height="400" />
  </div>;

export const BasicInputExample = () => <div className="not-prose">
    <iframe src="https://kerny-custom.vercel.app/preview/BasicInputExample" frameBorder="0" width="100%" height="360" />
  </div>;

## Overview

The Input component provides a versatile text input with support for various types, validation states, icons, and helper text.

## Basic Usage

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { useState } from "react";
    import { Input } from "@peppermint-design/devreadykit-custom";

    export default function InputExample() {
      const [value, setValue] = useState('');

      return (
        <div className="flex min-w-[230px] flex-col gap-4">
          <Input
            value={value}
            onChange={(nextValue) => setValue(String(nextValue))}
            label="Full name"
            placeholder="e.g., Ada Lovelace"
            supportText="Use your legal name as on your ID."
          />
        </div>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <BasicInputExample />
  </Tab>
</Tabs>

## Input Types

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { useState } from "react";
    import Input from "@peppermint-design/devreadykit-custom";

    export default function InputTypes() {
        const [numberValue, setNumberValue] = useState<number | string>("");
        const [password, setPassword] = useState<string>("");

        return (
            <div className="flex items-center flex-col gap-4 w-full">
                <div className="w-full flex flex-col gap-6">
                    <Input
                        type="text"
                        placeholder="Enter your name"
                        label="Full Name"
                    />

                    <Input
                        type="number"
                        placeholder="0"
                        label="Quantity"
                        value={numberValue}
                        onChange={setNumberValue}
                    />

                    <Input
                        type="password"
                        placeholder="Enter password"
                        label="Password"
                        value={password}
                        onChange={(value) => setPassword(String(value))}
                    />
                </div>
            </div>
        );
    }

    ```
  </Tab>

  <Tab title="Preview">
    <InputTypes />
  </Tab>
</Tabs>

## With Labels and Helper Text

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
     import { useState } from "react";
     import Input from "@peppermint-design/devreadykit-custom";

    export default function InputWithLabels() {
        const [email, setEmail] = useState<string>("");
        const [required, setRequired] = useState<string>("");

        return (
            <div className="flex items-center flex-col gap-4 w-full">
                <div className="w-full flex flex-col gap-6">
                    <Input
                        label="Email Address"
                        placeholder="user@example.com"
                        supportText="We'll never share your email"
                        value={email}
                        onChange={(value) => setEmail(String(value))}
                    />

                    <Input
                        label="Required Field"
                        placeholder="This field is required"
                        required
                        value={required}
                        onChange={(value) => setRequired(String(value))}
                    />
                </div>
            </div>
        );
    }

    ```
  </Tab>

  <Tab title="Preview">
    <InputWithLabels />
  </Tab>
</Tabs>

## With Icons

### Start Icon

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import Input from "@peppermint-design/devreadykit-custom";
    import { Circle } from "@/assets/icons/circle.tsx";

    export default function InputWithIcons() {
      return (
        <div className="flex items-center flex-col gap-4 w-full">
            <Input
              placeholder="Amount"
              type="number"
              label="Amount"
              startIcon={<Circle />}
            />
        </div>
      );
    }

    ```
  </Tab>

  <Tab title="Preview">
    <InputWithIcons />
  </Tab>
</Tabs>

## Validation States

### Error State

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    <Input 
      placeholder="Enter email"
      label="Email"
      errorMessage="Please enter a valid email address"
      value="invalid-email"
    />
    ```
  </Tab>

  <Tab title="Preview">
    <InputValidationStates />
  </Tab>
</Tabs>

## States

### Disabled and read only

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import Input from "@peppermint-design/devreadykit-custom";

    export default function InputStates() {
      return (
        <div className="flex items-center flex-col gap-4 w-full">
          <div className="w-full flex flex-col gap-6">
            <Input
              placeholder="Disabled input"
              label="Disabled Field"
              value="Cannot edit this"
              disabled
            />

            <Input
              placeholder="Read only input"
              label="Read Only Field"
              value="Cannot edit this"
              readOnly
            />
          </div>
        </div>
      );
    }

    ```
  </Tab>

  <Tab title="Preview">
    <InputStates />
  </Tab>
</Tabs>

## Props

| Prop         | Type                                | Default  | Description                   |
| :----------- | :---------------------------------- | :------- | :---------------------------- |
| type         | `"text" \| "number" \| "password"`  | `"text"` | Input type                    |
| label        | `string`                            | —        | Input label                   |
| placeholder  | `string`                            | —        | Placeholder text              |
| value        | `string \| number`                  | `""`     | Input value                   |
| onChange     | `(value: string \| number) => void` | —        | Change handler                |
| disabled     | `boolean`                           | `false`  | Disabled state                |
| readOnly     | `boolean`                           | `false`  | Read only state               |
| required     | `boolean`                           | `false`  | Required field indicator      |
| errorMessage | `string`                            | —        | Error message                 |
| supportText  | `string`                            | —        | Helper text                   |
| startIcon    | `React.ReactNode`                   | —        | Icon at start of input        |
| endIcon      | `React.ReactNode`                   | —        | Icon at end of input          |
| action       | `React.ReactNode`                   | —        | Action button                 |
| min          | `number`                            | —        | Minimum value (number inputs) |
| max          | `number`                            | —        | Maximum value (number inputs) |
| step         | `number`                            | `1`      | Step value (number inputs)    |
| className    | `string`                            | `""`     | Additional CSS classes        |

## Examples

### Contact Form

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Input, Button } from '@peppermint-design/devreadykit-custom';
    import { useState } from 'react';

    function ContactFormExample() {
      const [formData, setFormData] = useState({
        name: '',
        email: '',
        phone: ''
      });

      const handleSubmit = (e) => {
        e.preventDefault();
         console.log('Form submitted!');
      };

      return (
        <form onSubmit={handleSubmit} className="space-y-4 max-w-md">
          <Input
            label="Full Name"
            placeholder="John Doe"
            value={formData.name}
            onChange={(value) => setFormData(prev => ({ ...prev, name: value }))}
            required
          />
          
          <Input
            type="text"
            label="Email"
            placeholder="john@example.com"
            value={formData.email}
            onChange={(value) => setFormData(prev => ({ ...prev, email: value }))}
            required
          />
          
          <Input
            type="text"
            label="Phone"
            placeholder="+123 456-7890"
            value={formData.phone}
            onChange={(value) =>
              setFormData((prev) => ({ ...prev, phone: String(value) }))
            }
          />
          
          <Button type="submit" variant="filled" color="primary">
            Submit Form
          </Button>
        </form>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <ContactFormExample />
  </Tab>
</Tabs>