Skip to content

InputCheckbox Component

Description

The InputCheckbox component is a reusable checkbox input with built-in state management. It supports: - Custom labels - Controlled & uncontrolled behavior - Disabled state - Callback on change events

Props

Prop Type Default Description
id string - Unique identifier for the checkbox.
label string - Label displayed next to the checkbox.
onChange (data: { id: string, value: boolean }) => void - Callback function triggered on change.
defaultValue boolean false Initial checked state.
disabled boolean false Disables the checkbox input.

Example Usage

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
import { InputCheckbox } from "@nomana-it/liberty-core"
import { useState } from "react";

export const InputCheckboxExample = () => {
  const [isChecked, setIsChecked] = useState(false);

  const handleCheckboxChange = (data: { id: string; value: boolean }) => {
    setIsChecked(data.value);
  };

  return (
    <InputCheckbox
      id="custom-checkbox"
      label="Enable Feature"
      defaultValue={isChecked}
      onChange={handleCheckboxChange}
    />
  );
};

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