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>
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
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 |
| Slot Property | Type | Description |
|---|---|---|
builder | object | The builder attributes and actions to apply to the element if using the |
attrs | object | Additional attributes to apply to the element if using the |
| Data Attribute | Value | Description |
|---|---|---|
data-label-root | —— | Present on the root element. |
🚧 UNDER CONSTRUCTION 🚧