Skip to content
Vy logo
Components

Switch

Switches let the users choose between yes or no.

Examples

A simple switch

<Switch />

Different sizes

<Flex gap={1}>
  <Switch size="sm" /> 
  <Switch size="md" /> 
  <Switch size="lg" /> 
</Flex>

A disabled switch

<Flex gap={1}>
  <Switch disabled />
  <Switch disabled checked />
</Flex>

An invalid switch

<Switch invalid errorText="Error text" label="Invalid switch"/>

A switch with label

<Switch label="Switch with label"/>

A controlled switch

() => {
  const { open, onToggle } = useDisclosure();
  return (
    <Box>
      <Switch label="Show logo?" checked={open} onChange={onToggle} />
      {open ? <VyLogo colorScheme="light" /> : null}
    </Box>
  );
}