Checkbox

A customizable checkbox component that supports labels, indeterminate state, and disabled states.

Installation

Import the component:

import Checkbox from "@/components/ui/checkbox"

Checkboxes allow users to select multiple options from a set. Each checkbox can be checked or unchecked independently.

I agree to the terms and conditions

The indeterminate state is useful for showing a partially checked state, commonly used in 'select all' scenarios.

Select All

Checkboxes can be disabled to prevent user interaction.

Disabled Option

Prop

Type

Default

Description

nameRequired

string

—

Name of the checkbox

label

string

—

Label text for the checkbox

checked

boolean

—

Whether the checkbox is checked

indeterminate

boolean

—

Whether the checkbox is in an indeterminate state

disabled

boolean

—

Whether the checkbox is disabled

className

string

—

Additional CSS classes

onChange

function

—

Callback when checkbox state changes