Checkbox

A Checkbox component is a UI element that allows users to select or deselect one or more options from a list. It typically appears as a small square that can be checked (ticked) or unchecked. Checkboxes are often used in forms, settings, or filters where multiple selections are needed, and they provide a clear, binary choice for users.

Demo

Basic:

Enable email notifications

Receive marketing updates

I agree to the Terms of Service and Privacy Policy

Disabled:

This option is disabled (checked)

This option is disabled (unchecked)

Usage

import { useState } from 'react';
import { NCheck, NLink } from '@nayan-ui/react';

const Checkbox = () => {
  const [notifications, setNotifications] = useState(true);
  const [terms, setTerms] = useState(false);

  return (
    <div className="space-y-3">
      <NCheck checked={notifications} onChange={setNotifications}>
        Enable email notifications
      </NCheck>
      <NCheck checked={terms} onChange={setTerms}>
        I agree to the <NLink href="#">Terms of Service</NLink>
      </NCheck>
      <NCheck checked={false} disabled onChange={() => {}}>
        This option is disabled
      </NCheck>
    </div>
  );
};

export default Checkbox;

Attributes

Name	Type	Default	Details
id	string	Optional	You can pass id to create unique identifier.
className	string	' '	You can customise by passing tailwind classes.
checkClassName	string	' '	You can customise by passing tailwind classes.
labelClassName	string	' '	You can customise by passing tailwind classes.
disabled	boolean	false	You can pass disable state.
checked	boolean	Required	You can pass checked state.
onChange	(checked: boolean) => void	Required	You can get callback when checkbox state changes.
children	React.ReactNode	Required	Label content for the checkbox.
renderLabel	(children: React.ReactNode) => React.ReactNode	Optional	Custom render function for label.