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

Rendered live, with the same build of the library you install.

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

Source

Checkbox.tsx

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

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

  return (
    <div>
      <h3 className="text-foreground mb-2 mt-4 text-sm font-semibold">Basic:</h3>
      <div className="space-y-3 mb-5">
        <NCheck checked={notifications} onChange={setNotifications}>
          Enable email notifications
        </NCheck>
        <NCheck checked={marketing} onChange={setMarketing}>
          Receive marketing updates
        </NCheck>
        <NCheck checked={terms} onChange={setTerms}>
          I agree to the <NLink href="#">Terms of Service</NLink> and <NLink href="#">Privacy Policy</NLink>
        </NCheck>
      </div>

      <h3 className="text-foreground mb-2 mt-4 text-sm font-semibold">Disabled:</h3>
      <div className="space-y-3">
        <NCheck checked={disabled} disabled onChange={setDisabled}>
          This option is disabled (checked)
        </NCheck>
        <NCheck checked={false} disabled onChange={() => {}}>
          This option is disabled (unchecked)
        </NCheck>
      </div>
    </div>
  );
};

export default Checkbox;

Attributes

14 props

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.
name	string	Optional	HTML name attribute for form submission.
value	string	Optional	Value attribute for the checkbox.
isRequired	boolean	false	Whether the checkbox is required.
isIndeterminate	boolean	false	Whether the checkbox is in an indeterminate state.
label	React.ReactNode	Optional	Alias of children for the checkbox label.