Nayan UI - 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 Checkboxes

Simple checkbox with different states and labels.

Terms and Conditions

Checkbox with links and rich content in labels.

I accept the terms and conditions and privacy policy

Subscribe to our newsletter for updates and promotions

I am 18 years or older and agree to the age verification policy

Notification Settings

Group of related checkboxes for settings configuration.

Choose your notification preferences:

Email notifications

SMS notifications

Push notifications

Current settings: email, push

Feature Toggles

Checkboxes for enabling/disabling application features.

Dark mode(Beta)

Auto-save documents

Desktop notifications

Usage analytics

Help us improve the app

Custom Styled Checkboxes

Checkboxes with custom styling and colors.

Success checkbox (green)

Error checkbox (red)

Rounded checkbox (purple)

Gradient checkbox

Form Integration

Checkboxes integrated within forms with validation.

Accessibility

Checkboxes with proper ARIA attributes and keyboard support.

Accessibility preferences

Enable high contrast mode

Use large text

Reduce motion and animations

• Use Tab to navigate between checkboxes

• Use Space to toggle checkbox state

• Screen readers will announce checkbox labels and states

Interactive Demo

Real-time checkbox interactions with state display.

Select options:

Option 1

Option 2

Option 3

Current state:

Option 1: Unchecked

Option 2: Unchecked

Option 3: Checked

# Usage

# 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.

# Tags

Checkbox