Skip to content

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
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}
    />
  );
};

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