Skip to main content

​
Overview

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

​
Basic Usage

import { useState } from "react";
import { Input } from "@peppermint-design/devreadykit";

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>
  );
}

​
Input Types

import { useState } from "react";
import Input from "@peppermint-design/devreadykit";

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>
    );
}

​
With Labels and Helper Text

 import { useState } from "react";
 import Input from "@peppermint-design/devreadykit";

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="[email protected]"
                    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>
    );
}

​
With Icons

​
Start Icon

import Input from "@peppermint-design/devreadykit";
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>
  );
}

​
Validation States

​
Error State

<Input 
  placeholder="Enter email"
  label="Email"
  errorMessage="Please enter a valid email address"
  value="invalid-email"
/>

​
States

​
Disabled and read only

import Input from "@peppermint-design/devreadykit";

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>
  );
}

​
Props

PropTypeDefaultDescription
type"text" | "number" | "password""text"Input type
labelstring—Input label
placeholderstring—Placeholder text
valuestring | number""Input value
onChange(value: string | number) => void—Change handler
disabledbooleanfalseDisabled state
readOnlybooleanfalseRead only state
requiredbooleanfalseRequired field indicator
errorMessagestring—Error message
supportTextstring—Helper text
startIconReact.ReactNode—Icon at start of input
endIconReact.ReactNode—Icon at end of input
actionReact.ReactNode—Action button
minnumber—Minimum value (number inputs)
maxnumber—Maximum value (number inputs)
stepnumber1Step value (number inputs)
classNamestring""Additional CSS classes

​
Examples

​
Contact Form

import { Input, Button } from '@peppermint-design/devreadykit';
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="[email protected]"
        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>
  );
}