How about remove the Label warpper for Switch?

If we want to to let the label be before of the switch, we need:

<Flex
  sx={{
    justifyContent: 'space-between',
    alignItems: 'center',
    py: 4,
  }}>
  <Label htmlFor="enable-email-alerts" sx={{ flex: 1 }}>
    Enable email alerts?
  </Label>
  <Box>
    <Switch id="enable-email-alerts" />
  </Box>
</Flex>

But I find that Switch is already a Label element. Why? I think this will be better:

<Label sx={{
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    py: 4,
  }}>
  <span>Enable email alerts?</span>
  <Switch /> {/* A React.Fragment but not label element */}
</Label>

[PeterlitsZo]

How about this? I also update index.d.ts for type. (By the way, a stupid question – why we do not just use ts rather than js?)

I’m 20 now!

I’m also 20!

[PeterlitsZo]

By the way, do you think that we can change the inner div’s color rather than white is a better idea?

Not sure what you mean by this

I mean, the switch for show have two div: the outer div, and the inner div. The inner div is a circle, which it’s color is always white. Well, now I do not think that change it to another is a good idea. Those who want to change color may use CSS rule to change it.