Start Here
Introduction
Download
Syntax
Core Concepts
Aspect Ratio
Border Radius
Border Size
Border Style
Cursor
Display
Flex
Flex Alignment
Flex Direction
Flex Grow
Flex Position
Flex Size
Flex Width
Font
Gap
Height
Margin
Padding
Spacing
Width
UI Effects
Animations
Single Box
Multi Box
3D Box
Other
Box Shadows
OutSet Shadow
InSet Shadow
Text Shadow
OutSet Shadow
InSet Shadow
UI Widgets
Accordion
Buttons
Calendar
Card
Checks & Radio
Data Tables
Drag And Drop
DropDown
DropDown Multi Select
Gallery
Keypad
Pagination
Pop-Up
Progress Bar
Qty Selector
Skeleton
Spinners
Suggestion
Tabs
Toasts
Slider
Text Boxes
Text Editor
Tool Tip
Icons
Theme Color Shade
Color Shade
Text Color
Background Color
Border Color
Gradient
Text Gradient
Single Color
Double Color
Triple Color
Background Gradient
Single Color
Double Color
Triple Color
Border Gradient
Single Color
Double Color
Triple Color
Other Pages
Landing Pages
Top Nav 1
Top Nav 2
Side Nav 1
Login 1
Forget Password
Apps
Add Data
Nav First Level
Nav Second Level
Nav Third Level
N
A
V

Smart Keypad Interfaces

Design Seamless Input Experiences

Build intuitive user interactions with our smart keypad UI components. Whether you're integrating numeric entry for payments or alphabetic input for text fields, our system offers flexibility, responsiveness, and elegance to support every use case.

Keypad Features:

  • Numeric & Alphabetic Modes: Switch between number and letter inputs effortlessly.
  • Responsive Design: Optimized for both desktop and touchscreen devices.
  • Customizable Layout: Tailor the keypad to match your app's unique needs.
  • Secure Input: Suitable for PIN entry, OTPs, and password inputs.
  • Accessible Interface: Designed with usability in mind for all users.
  • Visual Feedback: Key presses animate and highlight for better clarity.

Floating Alpha Keypad

The Floating Alpha Keypad component provides users with an on-screen keyboard containing alphabetic characters that appears as an overlay or popup. It's ideal for touchscreen interfaces and scenarios where physical keyboards are not available.

Key Features

  • Displays alphabetic keys (A–Z) in a floating panel
  • Can be dragged or repositioned on the screen
  • Includes functional keys like Clear, Delete, and Enter
  • Optimized for touch-based input on mobile and tablet devices
Source Code 

<div id="absoluteNumericKeypad">
    <input class="TtBx MnBm10" type="text" placeholder="Enter Your Text" />
</div>


CT.CeKyPd({
    id: "absoluteNumericKeypad",
    type: 'floating',
    keypadBackground: "CrBdGy80Lt",
    values: [
        { key: "1", color: "#4F46E5", background: "#EEF2FF", width: "33.33%" },
        { key: "2", color: "#7C3AED", background: "#F3E8FF", width: "33.33%" },
        { key: "3", color: "#DB2777", background: "#FCE7F3", width: "33.33%" },
        { key: "4", color: "#DC2626", background: "#FEF2F2", width: "33.33%" },
        { key: "5", color: "#EA580C", background: "#FFF7ED", width: "33.33%" },
        { key: "6", color: "#D97706", background: "#FFFBEB", width: "33.33%" },
        { key: "7", color: "#65A30D", background: "#F7FEE7", width: "33.33%" },
        { key: "8", color: "#059669", background: "#ECFDF5", width: "33.33%" },
        { key: "9", color: "#0891B2", background: "#F0F9FF", width: "33.33%" },
        { key: "0", color: "#6B7280", background: "#F9FAFB", width: "33.33%" },
        { key: "00", color: "#374151", background: "#F3F4F6", width: "33.33%" },
        { key: "000", color: "#111827", background: "#E5E7EB", width: "33.33%" },

        { key: "A", color: "#1F2937", background: "#D1D5DB", width: "33.33%" },
        { key: "B", color: "#4F46E5", background: "#EEF2FF", width: "33.33%" },
        { key: "C", color: "#7C3AED", background: "#F3E8FF", width: "33.33%" },
        { key: "D", color: "#DB2777", background: "#FCE7F3", width: "33.33%" },
        { key: "E", color: "#DC2626", background: "#FEF2F2", width: "33.33%" },
        { key: "F", color: "#EA580C", background: "#FFF7ED", width: "33.33%" },
        { key: "G", color: "#D97706", background: "#FFFBEB", width: "33.33%" },
        { key: "H", color: "#65A30D", background: "#F7FEE7", width: "33.33%" },
        { key: "I", color: "#059669", background: "#ECFDF5", width: "33.33%" },
        { key: "J", color: "#0891B2", background: "#F0F9FF", width: "33.33%" },
        { key: "K", color: "#6B7280", background: "#F9FAFB", width: "33.33%" },
        { key: "L", color: "#374151", background: "#F3F4F6", width: "33.33%" },
        { key: "M", color: "#111827", background: "#E5E7EB", width: "33.33%" },
        { key: "N", color: "#1F2937", background: "#D1D5DB", width: "33.33%" },
        { key: "O", color: "#4F46E5", background: "#EEF2FF", width: "33.33%" },
        { key: "P", color: "#7C3AED", background: "#F3E8FF", width: "33.33%" },
        { key: "Q", color: "#DB2777", background: "#FCE7F3", width: "33.33%" },
        { key: "R", color: "#DC2626", background: "#FEF2F2", width: "33.33%" },
        { key: "S", color: "#EA580C", background: "#FFF7ED", width: "33.33%" },
        { key: "T", color: "#D97706", background: "#FFFBEB", width: "33.33%" },
        { key: "U", color: "#65A30D", background: "#F7FEE7", width: "33.33%" },
        { key: "V", color: "#059669", background: "#ECFDF5", width: "33.33%" },
        { key: "W", color: "#0891B2", background: "#F0F9FF", width: "33.33%" },
        { key: "X", color: "#6B7280", background: "#F9FAFB", width: "33.33%" },
        { key: "Y", color: "#374151", background: "#F3F4F6", width: "33.33%" },
        { key: "Z", color: "#111827", background: "#E5E7EB", width: "33.33%" },
        { key: ".", color: "#1F2937", background: "#D1D5DB", width: "33.33%" },
        { key: "-", color: "#4F46E5", background: "#EEF2FF", width: "33.33%" },
        { key: "_", color: "#7C3AED", background: "#F3E8FF", width: "33.33%" },
        { key: "@", color: "#DB2777", background: "#FCE7F3", width: "33.33%" },
        { key: "#", color: "#DC2626", background: "#FEF2F2", width: "33.33%" },
        { key: "$", color: "#EA580C", background: "#FFF7ED", width: "33.33%" },
        { key: "%", color: "#D97706", background: "#FFFBEB", width: "33.33%" },
        { key: "&", color: "#65A30D", background: "#F7FEE7", width: "33.33%" },
        { key: "*", color: "#059669", background: "#ECFDF5", width: "33.33%" },
        { key: "+", color: "#0891B2", background: "#F0F9FF", width: "33.33%" },
        { key: "/", color: "#6B7280", background: "#F9FAFB", width: "33.33%" },
        { key: "<", color: "#374151", background: "#F3F4F6", width: "33.33%" },
        { key: ">", color: "#111827", background: "#E5E7EB", width: "33.33%" },

        { key: "Del", color: "#EF4444", background: "#FEF2F2", width: "25%" },
        { key: "Clear", color: "#F59E0B", background: "#FFFBEB", width: "25%" },
        { key: "Enter", color: "#10B981", background: "#ECFDF5", width: "50%" },

        { key: "Copy", color: "#2563EB", background: "#EFF6FF", width: "33.33%" },
        { key: "Paste", color: "#0EA5E9", background: "#E0F2FE", width: "33.33%" },
        { key: "Space", color: "#6B7280", background: "#F3F4F6", width: "33.33%" },

        { key: "Select All", color: "#9333EA", background: "#F3E8FF", width: "100%" }
    ],

    columns: 8, // by default 1
})

Numeric Keypad

The Numeric Keypad component provides users with an easy way to input numbers using a touchscreen or mouse. It mimics the layout of a physical keypad commonly found on keyboards or point-of-sale systems.

Key Features

  • Designed for quick and accurate numeric input
  • Includes digits 0–9 and symbols like ".", "-", and "Enter"
  • Responsive layout that adapts to different screen sizes
  • Useful for POS, calculators, forms, and data entry screens
Source Code 

<div id="numericKeypad">
    <input class="TtBx MnBm10" type="text" placeholder="Enter Your Text" />
</div>


CT.CeKyPd({
    id: "numericKeypad",
    values: [
        { key: "1", color: "#4F46E5", background: "#EEF2FF", width: "33.33%" },
        { key: "2", color: "#7C3AED", background: "#F3E8FF", width: "33.33%" },
        { key: "3", color: "#DB2777", background: "#FCE7F3", width: "33.33%" },
        { key: "4", color: "#DC2626", background: "#FEF2F2", width: "33.33%" },
        { key: "5", color: "#EA580C", background: "#FFF7ED", width: "33.33%" },
        { key: "6", color: "#D97706", background: "#FFFBEB", width: "33.33%" },
        { key: "7", color: "#65A30D", background: "#F7FEE7", width: "33.33%" },
        { key: "8", color: "#059669", background: "#ECFDF5", width: "33.33%" },
        { key: "9", color: "#0891B2", background: "#F0F9FF", width: "33.33%" },
        { key: ".", color: "#6B7280", background: "#F9FAFB", width: "33.33%" },
        { key: "0", color: "#374151", background: "#F3F4F6", width: "33.33%" },
        { key: "00", color: "#111827", background: "#E5E7EB", width: "33.33%" },
        { key: "000", color: "#1F2937", background: "#D1D5DB", width: "50%" },
        { key: "Del", color: "#EF4444", background: "#FEF2F2", width: "25%" },
        { key: "Clear", color: "#F59E0B", background: "#FFFBEB", width: "25%" },
        { key: "Enter", color: "#10B981", background: "#ECFDF5", width: "100%" }
    ],
    columns: 3, // by default 1
    callback: (data) => {
        console.log('submiited:', data);
    }
})

Alphabetic Keypad

The Alphabetic Keypad component allows users to input letters and symbols using an on-screen interface. It resembles the layout of a traditional keyboard and is ideal for applications like forms, search bars, and text input fields.

Key Features

  • Includes A–Z keys arranged in a familiar QWERTY layout
  • Supports additional characters like symbols and punctuation
  • Responsive design for desktop and touchscreen devices
  • Can be combined with a numeric keypad for complete input functionality
Source Code 

<div id="alphabeticKeypad">
    <input class="TtBx MnBm10" type="text" placeholder="Enter Your Text" />
</div>


CT.CeKyPd({
    id: "alphabeticKeypad",
    values: [
        // Row 1
        { key: "Q", color: "#DC2626", background: "#FEF2F2", width: "10%" },
        { key: "W", color: "#6B7280", background: "#F9FAFB", width: "10%" },
        { key: "E", color: "#EA580C", background: "#FFF7ED", width: "10%" },
        { key: "R", color: "#EA580C", background: "#FFF7ED", width: "10%" },
        { key: "T", color: "#65A30D", background: "#F7FEE7", width: "10%" },
        { key: "Y", color: "#111827", background: "#E5E7EB", width: "10%" },
        { key: "U", color: "#059669", background: "#ECFDF5", width: "10%" },
        { key: "I", color: "#0891B2", background: "#F0F9FF", width: "10%" },
        { key: "O", color: "#7C3AED", background: "#F3E8FF", width: "10%" },
        { key: "P", color: "#DB2777", background: "#FCE7F3", width: "10%" },

        // Row 2
        { key: "A", color: "#4F46E5", background: "#EEF2FF", width: "10%" },
        { key: "S", color: "#D97706", background: "#FFFBEB", width: "10%" },
        { key: "D", color: "#DC2626", background: "#FEF2F2", width: "10%" },
        { key: "F", color: "#D97706", background: "#FFFBEB", width: "10%" },
        { key: "G", color: "#65A30D", background: "#F7FEE7", width: "10%" },
        { key: "H", color: "#059669", background: "#ECFDF5", width: "10%" },
        { key: "J", color: "#6B7280", background: "#F9FAFB", width: "10%" },
        { key: "K", color: "#374151", background: "#F3F4F6", width: "10%" },
        { key: "L", color: "#111827", background: "#E5E7EB", width: "10%" },

        // Row 3
        { key: "Z", color: "#1F2937", background: "#D1D5DB", width: "10%" },
        { key: "X", color: "#374151", background: "#F3F4F6", width: "10%" },
        { key: "C", color: "#DB2777", background: "#FCE7F3", width: "10%" },
        { key: "V", color: "#0891B2", background: "#F0F9FF", width: "10%" },
        { key: "B", color: "#7C3AED", background: "#F3E8FF", width: "10%" },
        { key: "N", color: "#4F46E5", background: "#EEF2FF", width: "10%" },
        { key: "M", color: "#1F2937", background: "#D1D5DB", width: "10%" },

        // Row 4 – Symbols
        { key: ".", color: "#4F46E5", background: "#EEF2FF", width: "10%" },
        { key: "-", color: "#7C3AED", background: "#F3E8FF", width: "10%" },
        { key: "_", color: "#DB2777", background: "#FCE7F3", width: "10%" },
        { key: "@", color: "#DC2626", background: "#FEF2F2", width: "10%" },
        { key: "#", color: "#EA580C", background: "#FFF7ED", width: "10%" },
        { key: "$", color: "#D97706", background: "#FFFBEB", width: "10%" },
        { key: "%", color: "#65A30D", background: "#F7FEE7", width: "10%" },
        { key: "&", color: "#059669", background: "#ECFDF5", width: "10%" },
        { key: "*", color: "#0891B2", background: "#F0F9FF", width: "10%" },
        { key: "+", color: "#6B7280", background: "#F9FAFB", width: "10%" },

        // Row 5 – Controls
        { key: "Del", color: "#EF4444", background: "#FEF2F2", width: "20%" },
        { key: "Clear", color: "#F59E0B", background: "#FFFBEB", width: "20%" },
        { key: "Enter", color: "#10B981", background: "#ECFDF5", width: "60%" }
    ],

    columns: 10, // by default 1
})

AlphaNumeric Keypad

The AlphaNumeric Keypad component allows users to input both letters (A–Z) and numbers (0–9), along with special characters. It is useful in forms, search inputs, login screens, and point-of-sale systems where both types of input are required.

Key Features

  • Combines alphabetic and numeric keys in a unified layout
  • Supports special characters like ".", "-", "@", and "#"
  • Includes functional keys like Enter, Clear, and Delete
  • Responsive and touch-friendly design for various screen sizes
Source Code 

<div id="alphaNumericKeypad">
    <input class="TtBx MnBm10" type="text" placeholder="Enter Your Text" />
</div>


CT.CeKyPd({
    id: "alphaNumericKeypad",
    values: [
        { key: "1", color: "#4F46E5", background: "#EEF2FF", width: "33.33%" },
        { key: "2", color: "#7C3AED", background: "#F3E8FF", width: "33.33%" },
        { key: "3", color: "#DB2777", background: "#FCE7F3", width: "33.33%" },
        { key: "4", color: "#DC2626", background: "#FEF2F2", width: "33.33%" },
        { key: "5", color: "#EA580C", background: "#FFF7ED", width: "33.33%" },
        { key: "6", color: "#D97706", background: "#FFFBEB", width: "33.33%" },
        { key: "7", color: "#65A30D", background: "#F7FEE7", width: "33.33%" },
        { key: "8", color: "#059669", background: "#ECFDF5", width: "33.33%" },
        { key: "9", color: "#0891B2", background: "#F0F9FF", width: "33.33%" },
        { key: "0", color: "#6B7280", background: "#F9FAFB", width: "33.33%" },
        { key: "00", color: "#374151", background: "#F3F4F6", width: "33.33%" },
        { key: "000", color: "#111827", background: "#E5E7EB", width: "33.33%" },

        { key: "A", color: "#1F2937", background: "#D1D5DB", width: "33.33%" },
        { key: "B", color: "#4F46E5", background: "#EEF2FF", width: "33.33%" },
        { key: "C", color: "#7C3AED", background: "#F3E8FF", width: "33.33%" },
        { key: "D", color: "#DB2777", background: "#FCE7F3", width: "33.33%" },
        { key: "E", color: "#DC2626", background: "#FEF2F2", width: "33.33%" },
        { key: "F", color: "#EA580C", background: "#FFF7ED", width: "33.33%" },
        { key: "G", color: "#D97706", background: "#FFFBEB", width: "33.33%" },
        { key: "H", color: "#65A30D", background: "#F7FEE7", width: "33.33%" },
        { key: "I", color: "#059669", background: "#ECFDF5", width: "33.33%" },
        { key: "J", color: "#0891B2", background: "#F0F9FF", width: "33.33%" },
        { key: "K", color: "#6B7280", background: "#F9FAFB", width: "33.33%" },
        { key: "L", color: "#374151", background: "#F3F4F6", width: "33.33%" },
        { key: "M", color: "#111827", background: "#E5E7EB", width: "33.33%" },
        { key: "N", color: "#1F2937", background: "#D1D5DB", width: "33.33%" },
        { key: "O", color: "#4F46E5", background: "#EEF2FF", width: "33.33%" },
        { key: "P", color: "#7C3AED", background: "#F3E8FF", width: "33.33%" },
        { key: "Q", color: "#DB2777", background: "#FCE7F3", width: "33.33%" },
        { key: "R", color: "#DC2626", background: "#FEF2F2", width: "33.33%" },
        { key: "S", color: "#EA580C", background: "#FFF7ED", width: "33.33%" },
        { key: "T", color: "#D97706", background: "#FFFBEB", width: "33.33%" },
        { key: "U", color: "#65A30D", background: "#F7FEE7", width: "33.33%" },
        { key: "V", color: "#059669", background: "#ECFDF5", width: "33.33%" },
        { key: "W", color: "#0891B2", background: "#F0F9FF", width: "33.33%" },
        { key: "X", color: "#6B7280", background: "#F9FAFB", width: "33.33%" },
        { key: "Y", color: "#374151", background: "#F3F4F6", width: "33.33%" },
        { key: "Z", color: "#111827", background: "#E5E7EB", width: "33.33%" },
        { key: ".", color: "#1F2937", background: "#D1D5DB", width: "33.33%" },
        { key: "-", color: "#4F46E5", background: "#EEF2FF", width: "33.33%" },
        { key: "_", color: "#7C3AED", background: "#F3E8FF", width: "33.33%" },
        { key: "@", color: "#DB2777", background: "#FCE7F3", width: "33.33%" },
        { key: "#", color: "#DC2626", background: "#FEF2F2", width: "33.33%" },
        { key: "$", color: "#EA580C", background: "#FFF7ED", width: "33.33%" },
        { key: "%", color: "#D97706", background: "#FFFBEB", width: "33.33%" },
        { key: "&", color: "#65A30D", background: "#F7FEE7", width: "33.33%" },
        { key: "*", color: "#059669", background: "#ECFDF5", width: "33.33%" },
        { key: "+", color: "#0891B2", background: "#F0F9FF", width: "33.33%" },
        { key: "/", color: "#6B7280", background: "#F9FAFB", width: "33.33%" },
        { key: "<", color: "#374151", background: "#F3F4F6", width: "33.33%" },
        { key: ">", color: "#111827", background: "#E5E7EB", width: "33.33%" },

        { key: "Del", color: "#EF4444", background: "#FEF2F2", width: "25%" },
        { key: "Clear", color: "#F59E0B", background: "#FFFBEB", width: "25%" },
        { key: "Enter", color: "#10B981", background: "#ECFDF5", width: "50%" },

        { key: "Copy", color: "#2563EB", background: "#EFF6FF", width: "33.33%" },
        { key: "Paste", color: "#0EA5E9", background: "#E0F2FE", width: "33.33%" },
        { key: "Space", color: "#6B7280", background: "#F3F4F6", width: "33.33%" },

        { key: "Select All", color: "#9333EA", background: "#F3E8FF", width: "100%" }
    ],

    columns: 8, // by default 1
})
Web Tool
Celebrate Tech © 2008 - 2024
Welcome Amit
  Logout
  Change Password
  Change Email

Loading...