Switch

Allows users to toggle between two states, typically representing on and off, with a sliding switch control.

@arctic-kit/snow

View source code

View storybook

Usage

Enable Arctic Design

Label

Color

Size

Disabled

Read Only

import { useState } from 'react';
import { Switch } from '@arctic-kit/snow';

function Demo() {
  const [checked, setChecked] = useState(false);

  return (
    <Switch
      label="Enable Arctic Design" color="primary" size="medium"
      onToggle={() => setChecked(!checked)}
      checked={checked}
    />
  );
}

API Reference

Props	Type	Default
`checked`	`boolean \| undefined`	`false`
`color`	`SnowColor`	`primary`
`disabled`	`boolean \| undefined`	`false`
`label`	`string \| undefined`	---
`onToggle`	`(() => void) \| undefined`	---
`readOnly`	`boolean \| undefined`	`false`
`size`	`"small" \| "medium" \| "large"`	`medium`

Snackbar Table