checked- Type
boolean | 'indeterminate'- Default
- -
- Description
- Controlled checked state.
Components / Inputs
Checkbox
தேர்வுப்பெட்டி
Checkboxes allow users to select one or more options from a set. They communicate binary (on/off) or multi-select state.
தேர்வுப்பெட்டிகள் ஒன்று அல்லது அதிகமான விருப்பங்களை தேர்வு செய்ய அனுமதிக்கின்றன.
Basic
Component preview
Checkbox examplesதேர்வுப்பெட்டி உதாரணங்கள்Anatomy
Structure
Anatomy
3 parts documented for implementation and review.
1
Control
கட்டுப்பாடுrequired<button>Interactive 16x16px square toggle with role=checkbox and rounded-sm corners. When checked, shows brand background with white CheckIcon. Supports checked, unchecked, and indeterminate states. Keyboard: Space to toggle.
2
Check icon
சரி சின்னம்svgWhite checkmark SVG icon that appears inside the checkbox when checked. Uses brand-colored background fill. For indeterminate state, shows a horizontal dash instead.
3
Label
லேபிள்required<label>Clickable text paired via htmlFor. Clicking toggles the checkbox. Text-sm (14px). For Tamil, apply font-tamil class. Label should be descriptive and action-oriented.
API
Props
defaultChecked- Type
boolean- Default
false- Description
- Uncontrolled initial state.
onCheckedChange- Type
(checked: boolean) => void- Default
- -
- Description
- Called when state changes.
disabled- Type
boolean- Default
false- Description
- Disables the checkbox.
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | 'indeterminate' | - | Controlled checked state. |
defaultChecked | boolean | false | Uncontrolled initial state. |
onCheckedChange | (checked: boolean) => void | - | Called when state changes. |
disabled | boolean | false | Disables the checkbox. |
Accessibility
- Always associate checkbox with a visible
LabelviahtmlFor. - Indeterminate state (
checked="indeterminate") is announced to screen readers. - Tamil labels must be language-tagged:
lang="ta"orclassName="font-tamil".
Best practices
Always pair checkbox with a visible Label
தேர்வுப்பெட்டியை எப்போதும் தெரியும் லேபிளுடன் இணைக்கவும்
Link every checkbox to a Label via htmlFor so clicking the label text also toggles the checkbox.
ஒவ்வொரு தேர்வுப்பெட்டியையும் htmlFor மூலம் லேபிளுடன் இணைக்கவும் — லேபிளை கிளிக் செய்தாலும் தேர்வுப்பெட்டி மாறும்.
Don't use Checkbox for immediate binary actions
உடனடி இருமம்ப செயல்களுக்கு Checkbox பயன்படுத்தாதே
For settings that take immediate effect — like toggling dark mode — use a Switch instead of a Checkbox.
உடனடியாக அமலாகும் அமைப்புகளுக்கு Switch பயன்படுத்தவும், Checkbox அல்ல.
Group related checkboxes with a fieldset legend
தொடர்புடைய தேர்வுப்பெட்டிகளை fieldset-ல் தொகுக்கவும்
Use a visible group heading to label a set of checkboxes so users understand they belong together.
தொடர்புடைய தேர்வுப்பெட்டிகளை ஒரு தலைப்பின் கீழ் தொகுத்து தெளிவாக்கவும்.
Don't pre-check marketing consent checkboxes
சந்தைப்படுத்தல் ஒப்புதல் தேர்வுப்பெட்டியை முன்கூட்டியே தேர்வு செய்யாதே
Pre-checking consent checkboxes for marketing emails violates GDPR and dark-pattern guidelines.
சந்தைப்படுத்தல் மின்னஞ்சலுக்கு முன்கூட்டியே சம்மதம் தேர்வு செய்வது GDPR விதிகளை மீறும்.