---
title: Checkbox
description: A control that allows the user to toggle between checked and not checked.
---

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/checkbox"
	"github.com/axadrn/shadcn-templ/v2/components/field"
	"github.com/axadrn/shadcn-templ/v2/components/label"
)

templ CheckboxDemo() {
	@field.Group(field.GroupProps{Class: "max-w-sm"}) {
		@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {
			@checkbox.Checkbox(checkbox.Props{ID: "terms-checkbox", Name: "terms-checkbox"})
			@label.Label(label.Props{For: "terms-checkbox"}) {
				Accept terms and conditions
			}
		}
		@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {
			@checkbox.Checkbox(checkbox.Props{ID: "terms-checkbox-2", Name: "terms-checkbox-2", Checked: true})
			@field.Content() {
				@field.Label(field.LabelProps{For: "terms-checkbox-2"}) {
					Accept terms and conditions
				}
				@field.Description() {
					By clicking this checkbox, you agree to the terms.
				}
			}
		}
		@field.Field(field.Props{Orientation: field.OrientationHorizontal, Attributes: templ.Attributes{"data-disabled": "true"}}) {
			@checkbox.Checkbox(checkbox.Props{ID: "toggle-checkbox", Name: "toggle-checkbox", Disabled: true})
			@field.Label(field.LabelProps{For: "toggle-checkbox"}) {
				Enable notifications
			}
		}
		@field.Label() {
			@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {
				@checkbox.Checkbox(checkbox.Props{ID: "toggle-checkbox-2", Name: "toggle-checkbox-2"})
				@field.Content() {
					@field.Title() {
						Enable notifications
					}
					@field.Description() {
						You can enable or disable notifications at any time.
					}
				}
			}
		}
	}
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
shadcn-templ add checkbox
```

</TabsContent>

<TabsContent value="manual">

<Steps className="mb-0 pt-2">

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="checkbox" title="components/checkbox/checkbox.templ" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```go
import "github.com/axadrn/shadcn-templ/v2/components/checkbox"
```

```templ
@checkbox.Checkbox()
```

## Checked State

Use the `Checked` prop to render the checkbox checked initially.

```templ showLineNumbers
@checkbox.Checkbox(checkbox.Props{Checked: true})
```

## Invalid State

Set `aria-invalid` on the checkbox and `data-invalid` on the field wrapper to show the invalid styles.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/checkbox"
	"github.com/axadrn/shadcn-templ/v2/components/field"
)

templ CheckboxInvalid() {
	@field.Group(field.GroupProps{Class: "mx-auto w-56"}) {
		@field.Field(field.Props{Orientation: field.OrientationHorizontal, Attributes: templ.Attributes{"data-invalid": "true"}}) {
			@checkbox.Checkbox(checkbox.Props{
				ID:         "terms-checkbox-invalid",
				Name:       "terms-checkbox-invalid",
				Attributes: templ.Attributes{"aria-invalid": "true"},
			})
			@field.Label(field.LabelProps{For: "terms-checkbox-invalid"}) {
				Accept terms and conditions
			}
		}
	}
}
```

## Basic

Pair the checkbox with `field.Field` and `field.Label` for proper layout and labeling.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/checkbox"
	"github.com/axadrn/shadcn-templ/v2/components/field"
)

templ CheckboxBasic() {
	@field.Group(field.GroupProps{Class: "mx-auto w-56"}) {
		@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {
			@checkbox.Checkbox(checkbox.Props{ID: "terms-checkbox-basic", Name: "terms-checkbox-basic"})
			@field.Label(field.LabelProps{For: "terms-checkbox-basic"}) {
				Accept terms and conditions
			}
		}
	}
}
```

## Description

Use `field.Content` and `field.Description` for helper text.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/checkbox"
	"github.com/axadrn/shadcn-templ/v2/components/field"
)

templ CheckboxDescription() {
	@field.Group(field.GroupProps{Class: "mx-auto w-72"}) {
		@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {
			@checkbox.Checkbox(checkbox.Props{ID: "terms-checkbox-desc", Name: "terms-checkbox-desc", Checked: true})
			@field.Content() {
				@field.Label(field.LabelProps{For: "terms-checkbox-desc"}) {
					Accept terms and conditions
				}
				@field.Description() {
					By clicking this checkbox, you agree to the terms and conditions.
				}
			}
		}
	}
}
```

## Disabled

Use the `Disabled` prop to prevent interaction and add the `data-disabled` attribute to the `field.Field` component for disabled styles.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/checkbox"
	"github.com/axadrn/shadcn-templ/v2/components/field"
)

templ CheckboxDisabled() {
	@field.Group(field.GroupProps{Class: "mx-auto w-56"}) {
		@field.Field(field.Props{Orientation: field.OrientationHorizontal, Attributes: templ.Attributes{"data-disabled": "true"}}) {
			@checkbox.Checkbox(checkbox.Props{ID: "toggle-checkbox-disabled", Name: "toggle-checkbox-disabled", Disabled: true})
			@field.Label(field.LabelProps{For: "toggle-checkbox-disabled"}) {
				Enable notifications
			}
		}
	}
}
```

## Group

Use multiple fields to create a checkbox list.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/checkbox"
	"github.com/axadrn/shadcn-templ/v2/components/field"
)

templ CheckboxGroup() {
	@field.Set() {
		@field.Legend(field.LegendProps{Variant: field.LegendVariantLabel}) {
			Show these items on the desktop:
		}
		@field.Description() {
			Select the items you want to show on the desktop.
		}
		@field.Group(field.GroupProps{Class: "gap-3"}) {
			@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {
				@checkbox.Checkbox(checkbox.Props{ID: "finder-pref-hard-disks-checkbox", Name: "finder-pref-hard-disks-checkbox", Checked: true})
				@field.Label(field.LabelProps{For: "finder-pref-hard-disks-checkbox", Class: "font-normal"}) {
					Hard disks
				}
			}
			@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {
				@checkbox.Checkbox(checkbox.Props{ID: "finder-pref-external-disks-checkbox", Name: "finder-pref-external-disks-checkbox", Checked: true})
				@field.Label(field.LabelProps{For: "finder-pref-external-disks-checkbox", Class: "font-normal"}) {
					External disks
				}
			}
			@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {
				@checkbox.Checkbox(checkbox.Props{ID: "finder-pref-cds-dvds-checkbox", Name: "finder-pref-cds-dvds-checkbox"})
				@field.Label(field.LabelProps{For: "finder-pref-cds-dvds-checkbox", Class: "font-normal"}) {
					CDs, DVDs, and iPods
				}
			}
			@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {
				@checkbox.Checkbox(checkbox.Props{ID: "finder-pref-connected-servers-checkbox", Name: "finder-pref-connected-servers-checkbox"})
				@field.Label(field.LabelProps{For: "finder-pref-connected-servers-checkbox", Class: "font-normal"}) {
					Connected servers
				}
			}
		}
	}
}
```

## Table

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/checkbox"
	"github.com/axadrn/shadcn-templ/v2/components/table"
)

type checkboxTableRow struct {
	ID    string
	Name  string
	Email string
	Role  string
}

var checkboxTableData = []checkboxTableRow{
	{ID: "1", Name: "Sarah Chen", Email: "sarah.chen@example.com", Role: "Admin"},
	{ID: "2", Name: "Marcus Rodriguez", Email: "marcus.rodriguez@example.com", Role: "User"},
	{ID: "3", Name: "Priya Patel", Email: "priya.patel@example.com", Role: "User"},
	{ID: "4", Name: "David Kim", Email: "david.kim@example.com", Role: "Editor"},
}

templ CheckboxTable() {
	<div data-checkbox-table-demo>
		@table.Table() {
			@table.Header() {
				@table.Row() {
					@table.Head(table.HeadProps{Class: "w-8"}) {
						@checkbox.Checkbox(checkbox.Props{
							ID:         "select-all-checkbox",
							Name:       "select-all-checkbox",
							Attributes: templ.Attributes{"data-select-all": true},
						})
					}
					@table.Head() {
						Name
					}
					@table.Head() {
						Email
					}
					@table.Head() {
						Role
					}
				}
			}
			@table.Body() {
				for _, row := range checkboxTableData {
					@table.Row(table.RowProps{
						Attributes: templ.Attributes{"data-state": templ.KV("selected", row.ID == "1")},
					}) {
						@table.Cell() {
							@checkbox.Checkbox(checkbox.Props{
								ID:      "row-" + row.ID + "-checkbox",
								Name:    "row-" + row.ID + "-checkbox",
								Checked: row.ID == "1",
							})
						}
						@table.Cell(table.CellProps{Class: "font-medium"}) {
							{ row.Name }
						}
						@table.Cell() {
							{ row.Email }
						}
						@table.Cell() {
							{ row.Role }
						}
					}
				}
			}
		}
	</div>
	<script nonce={ templ.GetNonce(ctx) }>
		// The vanilla pendant of the demo's React selection state. The
		// checkbox renders a span root with a hidden native input beside it;
		// dispatching change after a programmatic check lets checkbox.js sync
		// the root's state attributes.
		let updatingCheckboxTable = false;
		document.addEventListener('change', (e) => {
			const demo = e.target.closest('[data-checkbox-table-demo]');
			if (!demo || !e.target.matches('[data-tui-checkbox-input]') || updatingCheckboxTable) return;
			const all = demo.querySelector('[data-select-all]')?.nextElementSibling;
			const rows = [...demo.querySelectorAll('tbody [data-tui-checkbox-input]')];
			const setChecked = (input, checked) => {
				if (input.checked === checked) return;
				input.checked = checked;
				input.dispatchEvent(new Event('change', { bubbles: true }));
			};
			// The dispatched change events re-enter this handler; the guard keeps
			// them from reacting to the half-updated state.
			updatingCheckboxTable = true;
			if (e.target === all) {
				rows.forEach((row) => setChecked(row, all.checked));
			} else {
				setChecked(all, rows.every((row) => row.checked));
			}
			updatingCheckboxTable = false;
			rows.forEach((row) => {
				row.closest('tr').toggleAttribute('data-state', row.checked);
				if (row.checked) row.closest('tr').setAttribute('data-state', 'selected');
			});
		});
	</script>
}
```

## API Reference

### Checkbox

The `Checkbox` component is a control that toggles between checked and not checked.

| Prop       | Type     | Default |
| ---------- | -------- | ------- |
| `Name`     | `string` | -       |
| `Value`    | `string` | -       |
| `Checked`  | `bool`   | `false` |
| `Disabled` | `bool`   | `false` |
| `Form`     | `string` | -       |
| `Class`    | `string` | -       |