Skip to content

Checkbox Component

Description

The Checkbox component is a custom-styled checkbox that supports indeterminate states, labels, and various label placements.

Props

Prop Type Default Description
checked boolean false Whether the checkbox is checked.
disabled boolean false Disables the checkbox.
indeterminate boolean false Displays an indeterminate (dash) state.
label string "" Optional label displayed next to the checkbox.
labelPlacement "start" , "end" , "top" , "bottom" "end" Defines where the label appears relative to the checkbox.

Example Usage

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
import { Checkbox } from "@nomana-it/liberty-core"

export const CheckboxExample = () => {
  return (
    <div>
      <Checkbox checked={true} label="Checked" />
      <Checkbox checked={false} label="Unchecked" />
      <Checkbox indeterminate={true} label="Indeterminate" />
      <Checkbox checked={true} disabled label="Disabled Checked" />
      <Checkbox checked={false} disabled label="Disabled Unchecked" />
    </div>
  );
};

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