Switch

The Switch component is used as an alternative to the Checkbox component. You can use it to render a single option that can be turned on or off.

Import

copy
import { Switch } from '@trendmicro/react-styled-ui';
import { Switch } from '@trendmicro/react-styled-ui';

Usage

EDITABLE EXAMPLE
copy
<Flex align="center">
  <Switch pr="1x" id="email-alerts" />
  <label htmlFor="email-alerts">Enable email alerts?</label>
</Flex>
<Flex align="center">
  <Switch pr="1x" id="email-alerts" />
  <label htmlFor="email-alerts">Enable email alerts?</label>
</Flex>

Sizes

Pass the size prop to change the size of the Switch.

EDITABLE EXAMPLE
copy
<Flex align="center">
  <Switch size="sm" />
  <Switch size="md" />
  <Switch size="lg" />
</Flex>
<Flex align="center">
  <Switch size="sm" />
  <Switch size="md" />
  <Switch size="lg" />
</Flex>

Switch background color

• Use the variantColor prop to change the checked background color of the Switch. variantColor can be any color key with key 50(hover), 60(checked, focus) that exist in the theme.colors.

  That means the red:60 exists in the theme.colors then can use variantColor="red".

• Learn more about colors theming.

EDITABLE EXAMPLE
copy
<Flex align="center">
  <Switch defaultChecked variantColor="red" />
  <Switch defaultChecked size="lg" variantColor="green" />
</Flex>
<Flex align="center">
  <Switch defaultChecked variantColor="red" />
  <Switch defaultChecked size="lg" variantColor="green" />
</Flex>

Props