Report an issue

Label

Identifies or describes associated UI elements.

	<script lang="ts">
  import { Checkbox, Label } from "bits-ui";
  import { Check, Minus } from "$icons/index.js";
</script>
 
<div class="flex items-center space-x-3">
  <Checkbox.Root
    id="terms"
    aria-labelledby="terms-label"
    class="peer inline-flex size-[25px] items-center justify-center rounded-md border border-muted bg-foreground transition-all duration-150 ease-in-out active:scale-98 data-[state=unchecked]:border-border-input data-[state=unchecked]:bg-background data-[state=unchecked]:hover:border-dark-40"
    name="hello"
  >
    {#snippet indicator({ checked })}
      <div class="inline-flex items-center justify-center text-background">
        {#if checked === true}
          <Check class="size-[15px]" weight="bold" />
        {:else if checked === "indeterminate"}
          <Minus class="size-[15px]" weight="bold" />
        {/if}
      </div>
    {/snippet}
  </Checkbox.Root>
  <Label.Root
    id="terms-label"
    for="terms"
    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
  >
    Accept terms and conditions
  </Label.Root>
</div>

Structure

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

API Reference

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
el
HTMLLabelElement

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

Default: undefined
Slot Property Type Description
builder
object

The builder attributes and actions to apply to the element if using the asChild prop with delegation.

Data Attribute Value Description
data-label-root
——

Present on the root element.