Checkbox Group

Sizes

First Second Third

<DemoSpaceX>
  <VelvetCheckboxGroup
    @size="sm"
    @value={{array "first"}}
    class="space-y-2"
    as |group|
  >
    <group.Checkbox @name="first">First</group.Checkbox>
    <group.Checkbox @name="second">Second</group.Checkbox>
    <group.Checkbox @name="third">Third</group.Checkbox>
  </VelvetCheckboxGroup>
  <VelvetCheckboxGroup
    @size="md"
    @value={{array "first"}}
    class="space-y-3"
    as |group|
  >
    <group.Checkbox @name="first">First</group.Checkbox>
    <group.Checkbox @name="second">Second</group.Checkbox>
    <group.Checkbox @name="third">Third</group.Checkbox>
  </VelvetCheckboxGroup>
  <VelvetCheckboxGroup
    @size="lg"
    @value={{array "first"}}
    class="space-y-4"
    as |group|
  >
    <group.Checkbox @name="first">First</group.Checkbox>
    <group.Checkbox @name="second">Second</group.Checkbox>
    <group.Checkbox @name="third">Third</group.Checkbox>
  </VelvetCheckboxGroup>
</DemoSpaceX>

Disabled

First Second Third

<VelvetCheckboxGroup
  @isDisabled={{true}}
  @value={{array "first"}}
  class="space-y-3"
  as |group|
>
  <group.Checkbox @name="first">First</group.Checkbox>
  <group.Checkbox @name="second">Second</group.Checkbox>
  <group.Checkbox @name="third">Third</group.Checkbox>
</VelvetCheckboxGroup>

Examples

Handle Change Events

Edit this demo

Use the @onChange argument to handle change events.

Value: ["first"]

First Second Third

<DemoSpaceY>
  <div>Value: {{this.valueAsString}}</div>
  <VelvetCheckboxGroup
    @onChange={{this.onChange}}
    @value={{this.value}}
    class="space-y-3"
    as |group|
  >
    <group.Checkbox @name="first">First</group.Checkbox>
    <group.Checkbox @name="second">Second</group.Checkbox>
    <group.Checkbox @name="third">Third</group.Checkbox>
  </VelvetCheckboxGroup>
</DemoSpaceY>

Signature

Element

HTMLDivElement

Blocks

Name	Description	Type
`:default` *	The checkboxes for the checkbox group.	`[{ Checkbox: WithBoundArgs<typeof VelvetCheckbox, 'isDisabled' \| 'size' \| 'privateGroupValue' \| 'privateGroupValueIsObject' \| 'privateInGroup' \| 'privateOnChangeGroup'>; }]`

Blocks marked with * are required.

Arguments

Name	Description	Type	Default Value
`@isDisabled`	Indicate if the checkbox group is disabled.	`boolean`	`false`
`@onChange`	Handle the checkbox group's `change` event.	`(value: Value, event: Event) => void`	`undefined`
`@size`	The size of the checkboxes.	`Size`	`"md"`
`@value`	The value of the checkbox group.	`Value`	`undefined`
`@valueIsObject`	Indicate if `@value` is an `Object` instead of an `Array`.	`boolean`	`false`

Arguments marked with * are required.