formscheckbox-group

CheckboxGroup

Multi-select checkbox group with card, list, and table layout variants.

Import#

import { CheckboxGroup } from 'moraine'

Slot Structure#

Fieldset with an optional legend grouping multiple Checkbox items.

root
└── fieldset
    ├── legend (optional)
    └── root (Checkbox, ×n)

Examples#

Variants#

List, card, and table variants with shared items data.

1
function Variants() {
2
  const ITEMS = [
3
    { value: 'alpha', label: 'Alpha', description: 'Primary rollout channel' },
4
    { value: 'beta', label: 'Beta', description: 'Early access channel' },
5
    { value: 'stable', label: 'Stable', description: 'Production channel' },
6
  ]
7

8
  return (
9
    <div class="gap-4 grid lg:grid-cols-3 sm:grid-cols-2">
10
      <div class="p-4 b-(1 border) rounded-lg">
11
        <CheckboxGroup legend="List" items={ITEMS} defaultValue={['alpha']} />
12
      </div>
13
      <div class="p-4 b-(1 border) rounded-lg">
14
        <CheckboxGroup legend="Card" items={ITEMS} variant="card" defaultValue={['beta']} />
15
      </div>
16
      <div class="p-4 b-(1 border) rounded-lg">
17
        <CheckboxGroup legend="Table" items={ITEMS} variant="table" defaultValue={['stable']} />
18
      </div>
19
    </div>
20
  )
21
}

Sizes#

Size scale from xs to xl in card variant.

1
function Sizes() {
2
  const ITEMS = [
3
    { value: 'alpha', label: 'Alpha', description: 'Primary rollout channel' },
4
    { value: 'beta', label: 'Beta', description: 'Early access channel' },
5
    { value: 'stable', label: 'Stable', description: 'Production channel' },
6
  ]
7

8
  const SIZES = ['xs', 'sm', 'md', 'lg', 'xl'] as const
9

10
  return (
11
    <div class="gap-3 grid lg:grid-cols-3 sm:grid-cols-2">
12
      <For each={SIZES}>
13
        {(size) => (
14
          <div class="p-4 b-(1 border) rounded-lg">
15
            <CheckboxGroup
16
              legend={`Size ${size}`}
17
              items={ITEMS}
18
              variant="card"
19
              size={size}
20
              defaultValue={size === 'xs' ? ['alpha'] : ['stable']}
21
            />
22
          </div>
23
        )}
24
      </For>
25
    </div>
26
  )
27
}

Orientation#

Vertical and horizontal layouts with the same item set.

1
function Orientation() {
2
  return (
3
    <div class="gap-4 grid md:grid-cols-2">
4
      <div class="p-4 b-(1 border) rounded-lg space-y-1">
5
        <CheckboxGroup legend="Vertical" items={ITEMS} defaultValue={['beta']} />
6
      </div>
7
      <div class="p-4 b-(1 border) rounded-lg space-y-1">
8
        <CheckboxGroup
9
          legend="Horizontal"
10
          items={HORIZONTAL_ITEMS}
11
          orientation="horizontal"
12
          defaultValue={['alpha']}
13
          classes={{
14
            fieldset: 'flex-wrap',
15
            item: 'min-w-26 flex-1',
16
          }}
17
        />
18
      </div>
19
    </div>
20
  )
21
}

Indicator#

Start/end/hidden indicator positions in list layout.

1
function Indicator() {
2
  return (
3
    <div class="gap-4 grid md:grid-cols-2 xl:grid-cols-3">
4
      <For each={INDICATORS}>
5
        {(indicator) => (
6
          <div class="p-4 b-(1 border) rounded-lg space-y-1">
7
            <p class="text-xs text-muted-foreground">Indicator: {indicator}</p>
8
            <CheckboxGroup
9
              legend="Channels"
10
              items={ITEMS}
11
              indicator={indicator}
12
              defaultValue={['beta']}
13
            />
14
          </div>
15
        )}
16
      </For>
17
    </div>
18
  )
19
}

Controlled + Disabled Items#

Controlled selected values with per-item disabled state.

1
function ControlledDisabledItems() {
2
  const ITEMS = [
3
    { value: 'alpha', label: 'Alpha', description: 'Primary rollout channel' },
4
    { value: 'beta', label: 'Beta', description: 'Early access channel' },
5
    { value: 'stable', label: 'Stable', description: 'Production channel' },
6
  ]
7

8
  const [value, setValue] = createSignal<string[]>(['beta'])
9

10
  return (
11
    <div class="max-w-2xl space-y-3">
12
      <CheckboxGroup
13
        legend="Controlled channels"
14
        variant="table"
15
        orientation="horizontal"
16
        items={[
17
          ...ITEMS,
18
          { value: 'legacy', label: 'Legacy', description: 'Frozen channel', disabled: true },
19
        ]}
20
        value={value()}
21
        onChange={setValue}
22
      />
23
      <p class="text-xs text-muted-foreground">Selected: {value().join(', ') || 'none'}</p>
24
    </div>
25
  )
26
}

API Reference#

Attributes#

Slotroot0 attributes

Group container that owns checkbox collection state and layout.

No attribute metadata for this slot.

Props#

Prop	Type	Default	Description
checkedIcon	`IconT.Name`	—	Default checked icon for all items.
class	`ClassValue`	—	Class applied to the component root or trigger element.
classes	`CheckboxGroupT.Classes \| undefined`	—	—
defaultValue	`string[] \| undefined`	—	The default value of the input (uncontrolled).
disabled	`boolean \| undefined`	`false`	Whether the input is disabled.
id	`string \| undefined`	—	The ID of the input element.
indeterminateIcon	`IconT.Name`	—	Default indeterminate icon for all items.
indicator	`"hidden" \| "end" \| "start" \| undefined`	—	Default indicator position for all items.
items	`(string \| CheckboxGroupT.Item<TTrue, TFalse>)[] \| undefined`	—	Array of items to render in the group.
legend	`JSX.Element`	—	Legend for the checkbox group.
name	`string \| undefined`	—	The name of the input element, used for form submission.
onChange	`((value: string[]) => void) \| undefined`	—	Callback when the selected values change.
orientation	`"horizontal" \| "vertical" \| undefined`	—	—
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	`CheckboxGroupT.Styles \| undefined`	—	—
value	`string[] \| undefined`	—	The current value of the input (controlled).
variant	`"list" \| "table" \| "card" \| undefined`	—	—

Items#

Prop	Type	Default	Description
checkedIcon	`IconT.Name`	—	Custom checked icon for this item.
description	`JSX.Element`	—	Description for the group item.
disabled	`boolean \| undefined`	—	Whether the item is disabled.
indeterminate	`boolean \| undefined`	—	Whether the item is indeterminate.
indeterminateIcon	`IconT.Name`	—	Custom indeterminate icon for this item.
label	`JSX.Element`	—	Label for the group item.
value	`string \| undefined`	—	Value of the group item.