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 [checked, setChecked] = React.useState(false)
  return (
    <Box>
      <Switch label="Show logo?" checked={checked} onCheckedChange={e => setChecked(e.checked)} />
      {checked ? <VyLogo colorScheme="light" /> : null}
    </Box>
  );
}