Checkbox

Sizes

Small Medium Large

<DemoSpaceX>
  <VelvetCheckbox @isChecked={{true}} @size="sm">Small</VelvetCheckbox>
  <VelvetCheckbox @isChecked={{true}} @size="md">Medium</VelvetCheckbox>
  <VelvetCheckbox @isChecked={{true}} @size="lg">Large</VelvetCheckbox>
</DemoSpaceX>

Disabled

Disabled Disabled

<DemoSpaceX>
  <VelvetCheckbox @isDisabled={{true}}>Disabled</VelvetCheckbox>
  <VelvetCheckbox @isChecked={{true}} @isDisabled={{true}}>
    Disabled
  </VelvetCheckbox>
</DemoSpaceX>

Indeterminate

<VelvetCheckbox @isIndeterminate={{true}}>Indeterminate</VelvetCheckbox>

Examples

Handle Change Events

Edit this demo

Use the @onChange argument to handle change events.

Checked: false

Option

<DemoSpaceY>
  <div>Checked: {{this.isChecked}}</div>
  <VelvetCheckbox @isChecked={{this.isChecked}} @onChange={{this.onChange}}>
    Option
  </VelvetCheckbox>
</DemoSpaceY>

Signature

Element

HTMLInputElement

Blocks

Name	Description	Type
`:default` *	The label of the checkbox.	`[]`

Blocks marked with * are required.

Arguments

Name	Description	Type	Default Value
`@isChecked`	Indicate if the checkbox is checked.	`boolean`	`false`
`@isDisabled`	Indicate if the checkbox is disabled.	`boolean`	`false`
`@isIndeterminate`	Indicate if the checkbox is indeterminate.	`boolean`	`false`
`@name`	The name of the checkbox.	`string`	`""`
`@onChange`	Handle the checkbox's `change` event.	`(value: boolean, event: Event) => void`	`undefined`
`@size`	The size of the checkbox.	`Size`	`"md"`

Arguments marked with * are required.