form fields

<tc-checkbox>

Form-associated checkbox with label, helper, error state, and indeterminate support.

import "@ra9/tan-compose-kit/checkbox"

Props

Name	Type	Default	Description
`checked`	`boolean`	`false`	Whether the box is checked. Reflects to the host.
`name`	`string`	`""`	Field name for form submission.
`value`	`string`	`"on"`	Value submitted when the checkbox is checked. Standard native default.
`label`	`string`	`""`	Text rendered next to the checkbox.
`helper`	`string`	`""`	Small helper text below the row.
`error`	`string`	`""`	Error message; paints invalid when set.
`disabled`	`boolean`	`false`	Disables the control; reflects to the host.
`required`	`boolean`	`false`	Required for form validation; reflects to the host.
`indeterminate`	`boolean`	`false`	Tri-state visual for "some children selected". Applied imperatively to the native input.

Events

Event	Detail	When
`tc-change`	`{ checked: boolean }`	Fires when the user toggles the checkbox.

CSS variables

Variable	Default	Description
`--tc-input-fg`	`var(--tc-color-ink, #14171f)`	Label color.
`--tc-input-border`	`var(--tc-color-rule-strong, #d9cfb8)`	Box border (used by the native `accent-color`).
`--tc-input-border-focus`	`var(--tc-color-accent, #a16939)`	Focus border color.
`--tc-input-error`	`var(--tc-color-danger, #b3261e)`	Error outline + text color.
`--tc-input-helper`	`var(--tc-color-ink-muted, #6b7280)`	Helper text color.
`--tc-input-radius`	`var(--tc-radius-sm, 4px)`	Corner radius of the box.
`--tc-input-font`	`var(--tc-font-sans, …)`	Font family.
`--tc-checkbox-accent`	`var(--tc-color-accent, #a16939)`	The `accent-color` of the native checkbox.

Examples

Basic usage

<tc-checkbox label="I agree to the terms."></tc-checkbox> <tc-checkbox label="Subscribe to the weekly digest." checked></tc-checkbox>

States

Indeterminate

indeterminate is set as a property (not an attribute) and shows the dash glyph the browser draws for "some children selected". Useful at the top of a tree.

<tc-checkbox id="parent" label="Select all"></tc-checkbox> <script type="module"> document.getElementById("parent").indeterminate = true; </script>

Error + required

<tc-checkbox label="I agree to the terms." required error="You must accept to continue." ></tc-checkbox>

In a form

Submits its value under name only when checked — matching the native input.

<form> <tc-checkbox name="newsletter" value="yes" label="Send me updates"></tc-checkbox> <tc-button type="submit">Subscribe</tc-button> </form>

Theming

The box itself is drawn by the browser via accent-color; only --tc-checkbox-accent controls its color. Surrounding label / helper / error follow the shared --tc-input-* tokens.

<tc-checkbox style="--tc-checkbox-accent: #207a5b;" label="Match my brand" ></tc-checkbox>

Accessibility

Renders a real <input type="checkbox"> wrapped in a <label> — click and keyboard activation work natively.
aria-invalid reflects the error state.
required is forwarded to the native input so browser validation kicks in on submit.
Indeterminate is purely visual; the form value still tracks checked.

← All components