Label

Identifies or describes associated UI elements.

	<script lang="ts">
  import { Checkbox } from "$lib";
  import { Label } from "$lib";
  import { Check, Minus } from "phosphor-svelte";
</script>
 
<div class="flex items-center space-x-3">
  <Checkbox.Root
    id="terms"
    aria-labelledby="terms-label"
    class="peer inline-flex items-center justify-center rounded-md border border-muted bg-foreground sq-[25px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98 data-[state=unchecked]:border-border-input data-[state=unchecked]:bg-background"
    checked="indeterminate"
  >
    <Checkbox.Indicator
      let:isChecked
      let:isIndeterminate
      class="inline-flex items-center justify-center text-background"
    >
      {#if isChecked}
        <Check class="sq-[15px]" weight="bold" />
      {:else if isIndeterminate}
        <Minus class="sq-[15px]" weight="bold" />
      {/if}
    </Checkbox.Indicator>
  </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>

	<script lang="ts">
  import { Checkbox } from "$lib";
  import { Label } from "$lib";
  import { Check, Minus } from "phosphor-svelte";
</script>
 
<div class="flex items-center space-x-3">
  <Checkbox.Root
    id="terms"
    aria-labelledby="terms-label"
    class="peer inline-flex items-center justify-center rounded-md border border-muted bg-foreground sq-[25px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98 data-[state=unchecked]:border-border-input data-[state=unchecked]:bg-background"
    checked="indeterminate"
  >
    <Checkbox.Indicator
      let:isChecked
      let:isIndeterminate
      class="inline-flex items-center justify-center text-background"
    >
      {#if isChecked}
        <Check class="sq-[15px]" weight="bold" />
      {:else if isIndeterminate}
        <Minus class="sq-[15px]" weight="bold" />
      {/if}
    </Checkbox.Indicator>
  </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>

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`
`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.