Switch

Switches can toggle the state of a single setting on or off. The Switch component is useful when we want users to toggle between any value.

Checked and Unchecked

Initial state of the switches can be changed using checked prop. By default switches are unchecked.

import React from 'react';
import { Switch } from 'chic-ui';

<>
  <Switch />
  <Switch checked />
</>;

Toggle between values

Use useState hook to make the switches interactive.

import React, { useState } from 'react';
import { Switch } from 'chic-ui';

function useSwitch(initial: boolean): [boolean, () => void] {
  const [checked, setChecked] = useState(initial);

  const onChange = useCallback(() => {
    setChecked((prev) => !prev);
  }, []);

  return [checked, onChange];
}

export const Checked = () => {
  const [checked, onChange] = useSwitch(true);
  return (
    <>
      <Switch checked={checked} onChange={onChange} type="secondary" />
    </>
  );
};

export const Unchecked = () => {
  const [checked, onChange] = useSwitch(false);
  return (
    <>
      <Switch checked={checked} onChange={onChange} type="danger" />
    </>
  );
};

Types

Use any of the available switches by changing the type prop.

import React from 'react';
import { Switch } from 'chic-ui';

<>
  <Switch checked />
  <Switch checked type="success" />
  <Switch checked type="secondary" />
  <Switch checked type="warning" />
  <Switch checked type="danger" />
  <Switch checked type="info" />
  <Switch checked type="light" />
</>;

Sizes

Get small or large switches easily by using the size prop.

import React from 'react';
import { Switch } from 'chic-ui';

<>
  <Switch checked size="small" />
  <Switch checked type="success" size="default" />
  <Switch checked type="danger" size="large" />
</>;

Padding

Change the padding of the switches using the padding prop.

import React from 'react';
import { Switch } from 'chic-ui';

<>
  <Switch checked padding="small" />
  <Switch checked type="success" padding="default" />
  <Switch checked type="danger" padding="large" />
</>;

Disabled

Use the disabled prop to disable any switch.

import React from 'react';
import { Switch } from 'chic-ui';

<>
  <Switch checked disabled />
</>;

API

import { Switch } from 'chic-ui';

Name	Type	Default	Description
type	'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'info' | 'light'	'primary'	Color of the switch
size	'small' | 'default' | 'large'	'default'	Size of the switch
padding	'small' | 'default' | 'large'	'default'	Change padding of switch's toggle
checked	boolean	false	Checked or unchecked switch
disabled	boolean	false	Disable a switch
onChange	() => void		Detects when the value of switch changes
className	string		Provide external classnames to the component
style	React.CSSProperties		Override default styling of the component