Renders an accessible label associated with controls.
1import { Checkbox } from "@/components/ui/checkbox";2import { Label } from "@/components/ui/label";34export default function Preview() {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/solidnpm install @sprawlify/primitives @sprawlify/solidyarn add @sprawlify/primitives @sprawlify/solidbun add @sprawlify/primitives @sprawlify/solid
Add the following files to your project:
1import { cn } from "@/lib/utils";2import { sprawlify } from "@sprawlify/solid";3import { type ComponentProps, splitProps } from "solid-js";45function Label(props: ComponentProps<typeof sprawlify.label>) {6 const [local, others] = splitProps(props, ["class"]);78 return (9 <sprawlify.label10 data-scope="label"11 data-part="root"12 data-slot="label"13 class={cn(14 "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",15 local.class,16 )}17 {...others}18 />19 );20}2122export { Label };23Update 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.
1import { Button } from "@/components/ui/button";2import { Checkbox } from "@/components/ui/checkbox";3import {4 Field,Get PRO
Need premium blocks and templates? Upgrade to PRO and get access.