Label

<Flex direction="column" gap="4">
  <Flex direction="column" gap="3">
    <Label htmlFor="vertical-email">Email</Label>
    <TextField.Root id="vertical-email" placeholder="Email" />
  </Flex>

  <Flex direction="column" gap="3">
    <Label htmlFor="vertical-password">Password</Label>
    <TextField.Root
      id="vertical-password"
      placeholder="Password"
      type="password"
    />
  </Flex>
</Flex>

<Flex direction="column" gap="4">
  <Grid align="center" columns="100px 1fr">
    <Label htmlFor="horizontal-email">Email</Label>
    <TextField.Root id="horizontal-email" placeholder="Email" />
  </Grid>

  <Grid align="center" columns="100px 1fr">
    <Label htmlFor="horizontal-password">Password</Label>
    <TextField.Root
      id="horizontal-password"
      placeholder="Password"
      type="password"
    />
  </Flex>
</Flex>