By clicking this checkbox, you agree to the terms.
package examples import (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
Usage
Checked State
Use the Checked prop to render the checkbox checked initially.
Invalid State
Set aria-invalid on the checkbox and data-invalid on the field wrapper to show the invalid styles.
package examples import (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.
package examples import (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.
By clicking this checkbox, you agree to the terms and conditions.
package examples import (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.
package examples import (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.
package examples import (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
| Name | Role | ||
|---|---|---|---|
| Sarah Chen | [email protected] | Admin | |
| Marcus Rodriguez | [email protected] | User | |
| Priya Patel | [email protected] | User | |
| David Kim | [email protected] | Editor |
package examples import (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: "[email protected]", Role: "Admin"}, {ID: "2", Name: "Marcus Rodriguez", Email: "[email protected]", Role: "User"}, {ID: "3", Name: "Priya Patel", Email: "[email protected]", Role: "User"}, {ID: "4", Name: "David Kim", Email: "[email protected]", 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.