InputColor Component

Description

The InputColor component allows users to select colors using an interactive color picker. It supports:

• Customizable color selection.
• Fullscreen mode for small screens.
• Draggable & resizable dialogs for desktop users.
• Real-time preview of selected color.

Props

Prop	Type	Default	Description
id	string	-	Unique identifier for the input field.
label	string	-	Label displayed above the input field.
onChange	(e: React.ChangeEvent<HTMLInputElement>) => void	-	Callback triggered when the color changes.
value	string	""	Initial selected color in HEX format.
disabled	boolean	false	Disables color selection.

Example Usage

import { InputColor } from "@nomana-it/liberty-core"
import { useState } from "react";

export const InputColorExample = () => {
  const [color, setColor] = useState("#ff0000");

  const handleColorChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setColor(e.target.value);
  };

  return (
    <InputColor
      id="custom-color-picker"
      label="Select a Color"
      value={color}
      onChange={handleColorChange}
    />
  );
};

Useful Links

🔗 GitHub Repository (Core): Liberty Core
🔗 GitHub Repository (Test Project): Liberty Test
📖 Live Documentation: Liberty Core Docs
💖 Sponsor & Support: Sponsor Liberty Core