formscheckbox

Checkbox

Single checkbox control with card and list variants and custom true/false values.

Import#

import { Checkbox } from 'moraine'

Slot Structure#

Checkbox indicator with optional label and description.

root
├── container
│   ├── input
│   └── control
│       └── indicator (optional)
└── wrapper (optional)
    ├── label (optional)
    └── description (optional)

Examples#

Variants#

List and card variants with start/end/hidden indicator positions.

1
function Variants() {
2
  return (
3
    <div class="gap-8 grid sm:grid-cols-2">
4
      <div class="space-y-3">
5
        <Checkbox label="List / start" description="Default list style" defaultChecked />
6
        <Checkbox
7
          label="List / end"
8
          description="Indicator at the end"
9
          indicator="end"
10
          defaultChecked
11
        />
12
        <Checkbox
13
          label="List / hidden"
14
          description="Only text, no visible indicator"
15
          indicator="hidden"
16
          defaultChecked
17
        />
18
      </div>
19

20
      <div class="space-y-3">
21
        <Checkbox
22
          variant="card"
23
          label="Card variant"
24
          description="Whole card area is clickable"
25
          defaultChecked
26
        />
27
        <Checkbox
28
          variant="card"
29
          label="Card / end"
30
          description="Card with trailing indicator"
31
          indicator="end"
32
        />
33
        <Checkbox variant="card" label="Card / disabled" description="Disabled state" disabled />
34
      </div>
35
    </div>
36
  )
37
}

Sizes#

Scale from xs to xl with unified label spacing.

1
function Sizes() {
2
  const SIZES: CheckboxSizeName[] = ['xs', 'sm', 'md', 'lg', 'xl']
3

4
  type CheckboxSizeName = Exclude<CheckboxT.Variant['size'], undefined>
5

6
  return (
7
    <div class="flex flex-col gap-2 max-w-xl">
8
      <For each={SIZES}>
9
        {(size) => (
10
          <Checkbox
11
            size={size}
12
            label={`Size ${size}`}
13
            description={`Checkbox size: ${size}`}
14
            defaultChecked={size === 'md' || size === 'xl'}
15
          />
16
        )}
17
      </For>
18
    </div>
19
  )
20
}

Indeterminate + Custom Icons#

Custom checked/indeterminate icons with controlled indeterminate transition.

1
function IndeterminateCustomIcons() {
2
  const [indeterminate, setIndeterminate] = createSignal<'indeterminate' | boolean>('indeterminate')
3

4
  return (
5
    <div class="max-w-xl space-y-3">
6
      <Checkbox
7
        label="Permissions"
8
        description={`Current: ${String(indeterminate())}`}
9
        checked={indeterminate()}
10
        onChange={setIndeterminate}
11
        checkedIcon="i-lucide:check-check"
12
        indeterminateIcon="i-lucide:ellipsis"
13
      />
14
      <div class="flex flex-wrap gap-2">
15
        <Button variant="outline" size="sm" onClick={() => setIndeterminate('indeterminate')}>
16
          Set indeterminate
17
        </Button>
18
        <Button variant="outline" size="sm" onClick={() => setIndeterminate(true)}>
19
          Set checked
20
        </Button>
21
        <Button variant="outline" size="sm" onClick={() => setIndeterminate(false)}>
22
          Set unchecked
23
        </Button>
24
      </div>
25
    </div>
26
  )
27
}

Custom True/False Values#

Map checked state to domain values instead of boolean.

1
function CustomTrueFalseValues() {
2
  const INDICATORS: CheckboxIndicatorName[] = ['start', 'end', 'hidden']
3

4
  const [featureFlag, setFeatureFlag] = createSignal<'enabled' | 'disabled'>('enabled')
5

6
  type CheckboxIndicatorName = Exclude<CheckboxT.Variant['indicator'], undefined>
7

8
  return (
9
    <div class="max-w-xl space-y-3">
10
      <Checkbox<'enabled', 'disabled'>
11
        label="Feature flag"
12
        description="Controlled with custom values"
13
        trueValue="enabled"
14
        falseValue="disabled"
15
        checked={featureFlag()}
16
        onChange={setFeatureFlag}
17
        indicator="end"
18
      />
19
      <p class="text-xs text-muted-foreground">Current value: {featureFlag()}</p>
20

21
      <div class="p-3 b-(1 border) rounded-lg">
22
        <p class="text-xs text-muted-foreground mb-2">Indicator matrix:</p>
23
        <div class="flex flex-col gap-2">
24
          <For each={INDICATORS}>
25
            {(indicator) => (
26
              <Checkbox
27
                indicator={indicator}
28
                label={`Indicator ${indicator}`}
29
                description="Uncontrolled"
30
                defaultChecked
31
              />
32
            )}
33
          </For>
34
        </div>
35
      </div>
36
    </div>
37
  )
38
}

API Reference#

Attributes#

Slotroot0 attributes

Labelable checkbox wrapper that coordinates input, indicator, and text content.

No attribute metadata for this slot.

Props#

Prop	Type	Default	Description
checked	`"indeterminate" \| TTrue \| TFalse \| undefined`	—	Whether the checkbox is checked (controlled).
checkedIcon	`IconT.Name`	`icon-check`	Icon to show when checked.
class	`ClassValue`	—	Class applied to the component root or trigger element.
classes	`CheckboxT.Classes \| undefined`	—	—
defaultChecked	`boolean \| "indeterminate" \| undefined`	`false`	Whether the checkbox is checked by default (uncontrolled).
description	`JSX.Element`	—	Description text for the checkbox.
disabled	`boolean \| undefined`	`false`	Whether the input is disabled.
falseValue	`TFalse \| undefined`	`false`	Value to use when the checkbox is unchecked.
formFieldBind	`boolean \| undefined`	`true`	Whether to bind the checkbox value to the parent FormField.
id	`string \| undefined`	—	The ID of the input element.
indeterminate	`boolean \| undefined`	`false`	Whether the checkbox is in an indeterminate state.
indeterminateIcon	`IconT.Name`	`icon-minus`	Icon to show when indeterminate.
indicator	`"hidden" \| "end" \| "start" \| undefined`	—	—
label	`JSX.Element`	—	Label for the checkbox.
name	`string \| undefined`	—	The name of the input element, used for form submission.
onChange	`((value: TTrue \| TFalse) => void) \| undefined`	—	Callback when the checked state changes.
onPointerDown	`JSX.EventHandlerUnion<HTMLButtonElement, PointerEvent> \| undefined`	—	Pointer down handler for the checkbox control.
readOnly	`boolean \| undefined`	`false`	Whether the input is read-only.
ref	`JSX.HTMLElementTags["div"] extends { ref?: infer Ref; } ? Ref : never \| undefined`	—	—
required	`boolean \| undefined`	`false`	Whether the input is required.
size	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined`	—	—
style	`JSX.CSSProperties \| undefined`	—	—
styles	`CheckboxT.Styles \| undefined`	—	—
trueValue	`TTrue \| undefined`	`true`	Value to use when the checkbox is checked.
value	`string \| undefined`	`on`	Native value submitted when the checkbox is checked.
variant	`"list" \| "card" \| undefined`	—	—