Switch

Sizes

Small

Medium

Large

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

Disabled

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

Alignment

Left

Right

<DemoSpaceY>
  <VelvetSwitch @alignment="left">Left</VelvetSwitch>
  <VelvetSwitch @alignment="right">Right</VelvetSwitch>
</DemoSpaceY>

Examples

Handle Change Events

Edit this demo

Use the @onChange argument to handle change events.

Checked: false

Option

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

Signature

Element

HTMLInputElement

Blocks

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

Blocks marked with * are required.

Arguments

Name	Description	Type	Default Value
`@alignment`	Alignment of the switch.	`'left' \| 'right'`	`"left"`
`@isChecked`	Indicate if the switch is checked.	`boolean`	`false`
`@isDisabled`	Indicate if the switch is disabled.	`boolean`	`false`
`@onChange`	Handle the switch's `change` event.	`(isChecked: boolean, event: Event) => void`	`undefined`
`@size`	The size of the switch.	`'sm' \| 'md' \| 'lg'`	`"md"`

Arguments marked with * are required.