Site settings
Change the appearance of the site to suit your preferences
Switch
Switches let the users choose between yes or no.
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> ); }