React Segmented Input

A highly customizable React component library for code input fields. Perfect for verification codes, OTP inputs, PIN entries, and more. Supports two distinct design patterns: individual boxes and single line inputs.

🚀 Features

✅ Two Design Variants: Box-style (individual inputs) and Line-style (single input with spacing)
✅ Full TypeScript Support: Complete type safety and IntelliSense
✅ Highly Customizable: Extensive styling options for borders, colors, fonts, and spacing
✅ Separator Support: Add custom separators at specified positions
✅ Keyboard Navigation: Arrow keys, backspace, and automatic focus management
✅ Paste Support: Smart paste handling with automatic formatting
✅ Ref Methods: Programmatic control with getValue, setValue, clear, and focus
✅ Responsive Design: Mobile-friendly with responsive breakpoints
✅ Accessibility: ARIA-compliant and keyboard accessible
✅ Zero Dependencies: Lightweight with no external dependencies

📦 Installation

npm install react-segmented-input

🎯 Quick Start

Don't forget import package styles!

import "react-segmented-input/style.css";

JavaScript Usage

BoxCodeInput (Individual Boxes)

import React, { useRef } from "react";
import { BoxCodeInput } from "react-segmented-input";
import "react-segmented-input/style.css";

function App() {
  const inputRef = useRef(null);

  const handleComplete = (value) => {
    console.log("Code entered:", value);
  };

  const getValue = () => {
    const value = inputRef.current?.getValue();
    console.log("Current value:", value);
  };

  return (
    <div>
      <BoxCodeInput
        ref={inputRef}
        numberOfChars={6}
        separatorPositions={[3]}
        separatorChar="-"
        gap={12}
        onChange={(value) => console.log("Current value:", value)}
        onComplete={handleComplete}
        autoFocus
      />
      <button onClick={getValue}>Get Value</button>
    </div>
  );
}

export default App;

LineCodeInput (Single Line with Spacing)

import React, { useRef } from "react";
import { LineCodeInput } from "react-segmented-input";
import "react-segmented-input/style.css";

function App() {
  const inputRef = useRef(null);

  const handleComplete = (value) => {
    console.log("Code entered:", value);
  };

  return (
    <div>
      <LineCodeInput
        ref={inputRef}
        numberOfChars={8}
        separatorPositions={[4]}
        separatorChar="/"
        letterSpacing={12}
        onChange={(value) => console.log("Current value:", value)}
        onComplete={handleComplete}
      />
    </div>
  );
}

export default App;

TypeScript Usage

BoxCodeInput with TypeScript

import React, { useRef } from "react";
import { BoxCodeInput, CodeInputRef } from "react-segmented-input";
import "react-segmented-input/style.css";

function App(): JSX.Element {
  const inputRef = useRef<CodeInputRef>(null);

  const handleComplete = (value: string): void => {
    console.log("Code entered:", value);
  };

  const getValue = (): void => {
    const value = inputRef.current?.getValue();
    console.log("Current value:", value);
  };

  return (
    <div>
      <BoxCodeInput
        ref={inputRef}
        numberOfChars={6}
        separatorPositions={[3]}
        separatorChar="-"
        gap={12}
        onChange={(value: string) => console.log("Current value:", value)}
        onComplete={handleComplete}
        autoFocus
      />
      <button onClick={getValue}>Get Value</button>
    </div>
  );
}

export default App;

LineCodeInput with TypeScript

import React, { useRef } from "react";
import { LineCodeInput, CodeInputRef } from "react-segmented-input";
import "react-segmented-input/style.css";

function App(): JSX.Element {
  const inputRef = useRef<CodeInputRef>(null);

  const handleComplete = (value: string): void => {
    console.log("Code entered:", value);
  };

  return (
    <div>
      <LineCodeInput
        ref={inputRef}
        numberOfChars={8}
        separatorPositions={[4]}
        separatorChar="/"
        letterSpacing={12}
        onChange={(value: string) => console.log("Current value:", value)}
        onComplete={handleComplete}
      />
    </div>
  );
}

export default App;

📚 API Reference

BoxCodeInput Props

Prop	Type	Default	Description
`numberOfChars`	`number`	required	Number of characters/boxes
`borderTop`	`boolean`	`true`	Show top border
`borderRight`	`boolean`	`true`	Show right border
`borderBottom`	`boolean`	`true`	Show bottom border
`borderLeft`	`boolean`	`true`	Show left border
`border`	`boolean`	`true`	Show all borders (overrides individual border props)
`borderThickness`	`number`	`1`	Border thickness in pixels
`borderColor`	`string`	`'#ccc'`	Border color (hex, rgb, or named colors)
`backgroundColor`	`string`	`'transparent'`	Background color
`fontSize`	`number`	`16`	Font size in pixels
`fontWeight`	`number`	`400`	Font weight (100-900)
`textColor`	`string`	`'#000'`	Text color
`borderRadius`	`number`	`4`	Border radius in pixels
`width`	`number`	`40`	Width of each box in pixels
`height`	`number`	`40`	Height of each box in pixels
`gap`	`number`	`8`	Space between boxes in pixels
`separatorPositions`	`number[]`	`[]`	Positions where separators should appear
`separatorChar`	`string`	`'-'`	Character to use as separator
`onChange`	`(value: string) => void`	-	Called when value changes
`onComplete`	`(value: string) => void`	-	Called when all characters are entered
`value`	`string`	`''`	Controlled value
`placeholder`	`string`	`''`	Placeholder text for each box
`disabled`	`boolean`	`false`	Disable the input
`autoFocus`	`boolean`	`false`	Auto focus first input on mount
`className`	`string`	`''`	Additional CSS class
`style`	`React.CSSProperties`	`{}`	Additional inline styles

LineCodeInput Props

Prop	Type	Default	Description
`numberOfChars`	`number`	required	Number of characters
`borderTop`	`boolean`	`true`	Show top border
`borderRight`	`boolean`	`true`	Show right border
`borderBottom`	`boolean`	`true`	Show bottom border
`borderLeft`	`boolean`	`true`	Show left border
`border`	`boolean`	`true`	Show all borders
`borderThickness`	`number`	`1`	Border thickness in pixels
`borderColor`	`string`	`'#ccc'`	Border color
`backgroundColor`	`string`	`'transparent'`	Background color
`fontSize`	`number`	`16`	Font size in pixels
`fontWeight`	`number`	`400`	Font weight
`textColor`	`string`	`'#000'`	Text color
`textAlign`	`'center' \| 'left' \| 'right'`	`'center'`	Text alignment
`letterSpacing`	`number`	`8`	Space between characters in pixels
`borderRadius`	`number`	`4`	Border radius in pixels
`paddingTop`	`number`	`12`	Top padding in pixels
`paddingRight`	`number`	`16`	Right padding in pixels
`paddingBottom`	`number`	`12`	Bottom padding in pixels
`paddingLeft`	`number`	`16`	Left padding in pixels
`width`	`number`	-	Fixed width (auto-calculated if not provided)
`separatorPositions`	`number[]`	`[]`	Positions for separators
`separatorChar`	`string`	`'-'`	Separator character
`onChange`	`(value: string) => void`	-	Value change callback
`onComplete`	`(value: string) => void`	-	Completion callback
`value`	`string`	`''`	Controlled value
`placeholder`	`string`	`''`	Placeholder text
`disabled`	`boolean`	`false`	Disable input
`autoFocus`	`boolean`	`false`	Auto focus on mount
`className`	`string`	`''`	CSS class
`style`	`React.CSSProperties`	`{}`	Inline styles

Ref Methods

Both components support ref methods for programmatic control:

Method	Description
`getValue()`	Returns the current input value
`setValue(value: string)`	Sets the input value
`clear()`	Clears the input and focuses first field
`focus()`	Focuses the appropriate input field

🎨 Usage Examples

Using Refs for Programmatic Control

JavaScript Version

import React, { useRef } from "react";
import { BoxCodeInput } from "react-segmented-input";
import "react-segmented-input/style.css";

function App() {
  const inputRef = useRef(null);

  const handleGetValue = () => {
    const value = inputRef.current?.getValue();
    alert(`Current value: ${value}`);
  };

  const handleClear = () => {
    inputRef.current?.clear();
  };

  const handleSetValue = () => {
    inputRef.current?.setValue("123456");
  };

  return (
    <div>
      <BoxCodeInput
        ref={inputRef}
        numberOfChars={6}
        borderColor="#3b82f6"
        backgroundColor="white"
      />

      <div>
        <button onClick={handleGetValue}>Get Value</button>
        <button onClick={handleClear}>Clear</button>
        <button onClick={handleSetValue}>Set Value</button>
      </div>
    </div>
  );
}

export default App;

TypeScript Version

import React, { useRef } from "react";
import { BoxCodeInput, CodeInputRef } from "react-segmented-input";
import "react-segmented-input/style.css";

function App(): JSX.Element {
  const inputRef = useRef<CodeInputRef>(null);

  const handleGetValue = (): void => {
    const value = inputRef.current?.getValue();
    alert(`Current value: ${value}`);
  };

  const handleClear = (): void => {
    inputRef.current?.clear();
  };

  const handleSetValue = (): void => {
    inputRef.current?.setValue("123456");
  };

  return (
    <div>
      <BoxCodeInput
        ref={inputRef}
        numberOfChars={6}
        borderColor="#3b82f6"
        backgroundColor="white"
      />

      <div>
        <button onClick={handleGetValue}>Get Value</button>
        <button onClick={handleClear}>Clear</button>
        <button onClick={handleSetValue}>Set Value</button>
      </div>
    </div>
  );
}

export default App;

Phone Number Input

<BoxCodeInput
  numberOfChars={11}
  separatorPositions={[1, 4, 7]}
  separatorChar=" "
  borderColor="#6b7280"
  textColor="#374151"
  placeholder="0"
  width={35}
  height={40}
/>

Credit Card Number

<LineCodeInput
  numberOfChars={16}
  separatorPositions={[4, 8, 12]}
  separatorChar=" "
  borderColor="#f59e0b"
  textColor="#92400e"
  letterSpacing={8}
  textAlign="center"
  placeholder="0000 0000 0000 0000"
/>

IBAN Input

<LineCodeInput
  numberOfChars={26}
  separatorPositions={[2, 6, 10, 14, 18, 22]}
  separatorChar=" "
  borderColor="#8b5cf6"
  textColor="#6d28d9"
  fontSize={14}
  letterSpacing={4}
  textAlign="left"
  width={400}
  placeholder="TR00 0000 0000 0000 0000 0000 00"
/>

OTP Verification

<BoxCodeInput
  numberOfChars={6}
  borderColor="#10b981"
  backgroundColor="#f0fdf4"
  textColor="#065f46"
  fontSize={24}
  fontWeight={600}
  borderRadius={8}
  width={50}
  height={50}
  autoFocus
  onComplete={(code) => {
    // Verify OTP
    verifyOTP(code);
  }}
/>

Custom Styling

<LineCodeInput
  numberOfChars={8}
  separatorPositions={[4]}
  separatorChar="-"
  borderColor="#ec4899"
  backgroundColor="#fdf2f8"
  textColor="#be185d"
  fontSize={20}
  fontWeight={500}
  letterSpacing={15}
  borderRadius={12}
  paddingTop={20}
  paddingBottom={20}
  paddingLeft={25}
  paddingRight={25}
  style={{
    boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
  }}
/>

🎯 Advanced Features

Separator Positioning

Separators are added after the specified character positions:

// For numberOfChars={8} and separatorPositions={[2, 6]}
// Input: "12345678"
// Display: "12-345678" (separator after 2nd position)
//          "12-3456-78" (separator after 6th position)

<LineCodeInput
  numberOfChars={8}
  separatorPositions={[2, 6]}
  separatorChar="-"
/>

Controlled vs Uncontrolled

// Uncontrolled (recommended for most cases)
<BoxCodeInput numberOfChars={6} onChange={(value) => console.log(value)} />;

// Controlled
function ControlledExample() {
  const [value, setValue] = useState("");

  return <BoxCodeInput numberOfChars={6} value={value} onChange={setValue} />;
}

Custom Validation

function ValidatedInput() {
  const [value, setValue] = useState("");
  const [isValid, setIsValid] = useState(true);

  const handleChange = (newValue) => {
    setValue(newValue);
    // Custom validation logic
    setIsValid(newValue.length === 0 || /^\d+$/.test(newValue));
  };

  return (
    <BoxCodeInput
      numberOfChars={6}
      value={value}
      onChange={handleChange}
      borderColor={isValid ? "#10b981" : "#ef4444"}
      backgroundColor={isValid ? "#f0fdf4" : "#fef2f2"}
    />
  );
}

🎨 Styling

CSS Classes

The components provide CSS classes for custom styling:

/* BoxCodeInput */
.box-code-input {
  /* Container styles */
}

.box-code-input__field {
  /* Individual input field styles */
}

.box-code-input__separator {
  /* Separator styles */
}

/* LineCodeInput */
.line-code-input {
  /* Container styles */
}

.line-code-input__field {
  /* Input field styles */
}

Custom CSS

.my-custom-input .box-code-input__field {
  border: 2px solid #3b82f6;
  border-radius: 8px;
  font-family: "Monaco", "Menlo", monospace;
}

.my-custom-input .box-code-input__field:focus {
  border-color: #1d4ed8;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

📱 Responsive Design

The components include responsive breakpoints:

@media (max-width: 640px) {
  .box-code-input {
    gap: 4px; /* Reduced gap on mobile */
  }

  .line-code-input__field {
    font-size: 14px !important;
    letter-spacing: 4px !important;
    padding: 8px 12px !important;
  }
}

⚡ Performance

Lightweight: ~4KB gzipped
Zero Dependencies: No external dependencies
Optimized Rendering: Minimal re-renders with React best practices
Memory Efficient: Proper cleanup and ref management

🧪 Testing

import { render, fireEvent, screen } from "@testing-library/react";
import { BoxCodeInput } from "react-segmented-input";

test("handles input correctly", () => {
  const handleChange = jest.fn();

  render(
    <BoxCodeInput
      numberOfChars={4}
      onChange={handleChange}
      data-testid="code-input"
    />
  );

  const inputs = screen.getAllByRole("textbox");

  fireEvent.change(inputs[0], { target: { value: "1" } });
  expect(handleChange).toHaveBeenCalledWith("1");
});

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙋‍♂️ Support

If you find this package helpful, please consider:

⭐ Starring the repository
🐛 Reporting bugs
💡 Suggesting new features
📖 Improving documentation

📊 Browser Support

Chrome ≥ 60
Firefox ≥ 60
Safari ≥ 12
Edge ≥ 79

Name		Name	Last commit message	Last commit date
Latest commit History 10 Commits
public		public
src		src
.gitignore		.gitignore
README.md		README.md
banner.png		banner.png
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

enesmuzaffer22/react-segmented-input

Folders and files

Latest commit

History

Repository files navigation