Renders an accessible label associated with controls.
1<script lang="ts">
2import { Checkbox } from "@/components/ui/checkbox"
3import { Label } from "@/components/ui/label"
4</script>
Installation
pnpm dlx sprawlify@latest add labelnpx sprawlify@latest add labelyarn sprawlify@latest add labelbunx --bun sprawlify@latest add label
Install the following dependencies:
pnpm add @sprawlify/primitives @sprawlify/sveltenpm install @sprawlify/primitives @sprawlify/svelteyarn add @sprawlify/primitives @sprawlify/sveltebun add @sprawlify/primitives @sprawlify/svelte
Add the following files to your project:
1export { default as Label } from "./label.svelte";21<script lang="ts">
2import { cn } from "@/lib/utils"
3import type { HTMLLabelAttributes } from "svelte/elements"
4import { Sprawlify, type PolymorphicProps } from "@sprawlify/svelte";
5
6interface Props extends HTMLLabelAttributes, PolymorphicProps<"label"> {}
7
8let { class: className, children, ...rest }: Props = $props()
9</script>
10
11<Sprawlify
12 as="label"
13 data-scope="label"
14 data-part="root"
15 data-slot="label"
16 class={cn(
17 "gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
18 className
19 )}
20 {...rest}
21>
22 {@render children?.()}
23</Sprawlify>Update the import paths to match your project setup.
Usage
1import { Label } from "@/components/ui/label"1<Label for="email">Your email address</Label>Examples
Field
For form fields, use the Field component which includes built-in FieldLabel, FieldDescription, and FieldError components.
1<script lang="ts">
2import { Button } from "@/components/ui/button"
3import { Checkbox } from "@/components/ui/checkbox"
4import {
Get PRO
Need premium blocks and templates? Upgrade to PRO and get access.