Components

Checkbox

Independent and grouped choices with mixed state, native form values, and a precise 16px control.

Checkbox group

Wrap each control in its visible label. CheckboxGroup coordinates a string array while each Checkbox keeps native form behavior.

Require successful checks Require resolved threads Require signed commits

tsx

import { Checkbox, CheckboxGroup } from "@karnstack/dowel";

<CheckboxGroup defaultValue={["required"]}>
  <label><Checkbox value="required" /> Require successful checks</label>
  <label><Checkbox value="threads" /> Require resolved threads</label>
  <label><Checkbox value="signed" /> Require signed commits</label>
</CheckboxGroup>

States

Mixed state is for a parent choice whose children do not share one value. Disabled choices remain visible and named.

Checked Some repositories Unavailable

tsx

<label><Checkbox defaultChecked /> Checked</label>
<label><Checkbox indeterminate /> Some repositories</label>
<label><Checkbox disabled /> Unavailable</label>

Behavior

Space toggles the focused control. A checked Checkbox submits its value through the hidden native input. An unchecked control submits nothing unless uncheckedValue is provided.