Label

An enhanced version of the native HTML label element.

	<script lang="ts">
  import * as Checkbox from "@/components//ui/checkbox";
  import * as Label from "@/components//ui/label";
</script>
 
<div>
  <div class="flex items-center space-x-2">
    <Checkbox.Root id="terms" />
    <Label.Root for="terms"
      >Accept terms and conditions</Label.Root
    >
  </div>
</div>

	<script lang="ts">
  import * as Checkbox from "@/components//ui/checkbox";
  import * as Label from "@/components//ui/label";
</script>
 
<div>
  <div class="flex items-center space-x-2">
    <Checkbox.Root id="terms" />
    <Label.Root for="terms"
      >Accept terms and conditions</Label.Root
    >
  </div>
</div>

Accept terms and conditions

Structure

	<script lang="ts">
  import { Label } from "bits-ui";
</script>
 
<Label.Root />

	<script lang="ts">
  import { Label } from "bits-ui";
</script>
 
<Label.Root />

Component API

Label.Root

An enhanced label component that can be used with any input.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`

🚧 UNDER CONSTRUCTION 🚧