Basic usage

import Switch from '@semcore/ui/switch';
import type { SwitchProps, SwitchValueProps } from '@semcore/ui/switch';
import React from 'react';

type SwitchExampleProps = SwitchProps & SwitchValueProps;

const Demo = (props: SwitchExampleProps) => {
  return (
    <Switch size={props.size} theme={props.theme}>
      <Switch.Value defaultChecked={props.defaultChecked} ml={0} checked={props.checked} disabled={props.disabled} />
      <Switch.Addon>Receive updates</Switch.Addon>
    </Switch>
  );
};

export const defaultProps: SwitchExampleProps = {
  size: 'l',
  theme: 'success',
  disabled: undefined,
  checked: undefined,
  defaultChecked: true,
};

Demo.defaultProps = defaultProps;

export default Demo;

Visual clue

import CheckM from '@semcore/ui/icon/Check/m';
import CloseM from '@semcore/ui/icon/Close/m';
import Switch from '@semcore/ui/switch';
import type { SwitchProps, SwitchValueProps } from '@semcore/ui/switch';
import React from 'react';

type SwitchExampleProps = SwitchProps & SwitchValueProps;

const Demo = (props: SwitchExampleProps) => {
  const [value, setValue] = React.useState(true);
  return (
    <Switch size={props.size} theme={props.theme}>
      <Switch.Value checked={value} onChange={setValue} disabled={props.disabled}>
        {value ? <CheckM /> : <CloseM />}
      </Switch.Value>
      <Switch.Addon>Autosave</Switch.Addon>
    </Switch>
  );
};

export const defaultProps: SwitchExampleProps = {
  size: 'l',
  theme: 'success',
  disabled: false,
};

Demo.defaultProps = defaultProps;

export default Demo;

External label

import { Box, Flex } from '@semcore/ui/base-components';
import CheckM from '@semcore/ui/icon/Check/m';
import CloseM from '@semcore/ui/icon/Close/m';
import Switch from '@semcore/ui/switch';
import { Text } from '@semcore/ui/typography';
import React from 'react';

const Demo = () => {
  const [value, setValue] = React.useState(true);
  return (
    <Flex gap={2} alignItems='center'>
      <Text tag='label' size={200} htmlFor='email-subscription'>
        Email subscription
      </Text>
      <Box>
        <Switch size='l' theme='success'>
          <Switch.Value id='email-subscription' checked={value} onChange={setValue}>
            {value ? <CheckM /> : <CloseM />}
          </Switch.Value>
        </Switch>
      </Box>
    </Flex>
  );
};

export default Demo;