<script lang="ts">
import { Checkbox } from "$lib/components/ui/checkbox/index.js";
import { Label } from "$lib/components/ui/label/index.js";
</script>
<div>
<div class="flex items-center space-x-2">
<Checkbox id="terms" />
<Label for="terms">Accept terms and conditions</Label>
</div>
</div>Installation
pnpm dlx shadcn-svelte@latest add labelInstall bits-ui:
pnpm add bits-ui -DCopy and paste the following code into your project.
import Root from './label.svelte';
export {
Root,
//
Root as Label
};
<script lang="ts">
import { Label as LabelPrimitive } from 'bits-ui';
import { cn } from '$UTILS$.js';
let {
ref = $bindable(null),
class: className,
...restProps
}: LabelPrimitive.RootProps = $props();
</script>
<LabelPrimitive.Root
bind:ref
data-slot="label"
class={cn(
'gap-2 font-mono text-xs leading-relaxed font-semibold tracking-widest text-zinc-100 uppercase group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 peer-data-[slot=checkbox]:font-sans peer-data-[slot=checkbox]:text-sm peer-data-[slot=checkbox]:font-normal peer-data-[slot=checkbox]:tracking-normal peer-data-[slot=checkbox]:text-zinc-300 peer-data-[slot=checkbox]:normal-case peer-data-[slot=radio-group-item]:font-sans peer-data-[slot=radio-group-item]:text-sm peer-data-[slot=radio-group-item]:font-normal peer-data-[slot=radio-group-item]:tracking-normal peer-data-[slot=radio-group-item]:text-zinc-300 peer-data-[slot=radio-group-item]:normal-case peer-data-[slot=switch]:font-sans peer-data-[slot=switch]:text-sm peer-data-[slot=switch]:font-normal peer-data-[slot=switch]:tracking-normal peer-data-[slot=switch]:text-zinc-300 peer-data-[slot=switch]:normal-case flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed',
className
)}
{...restProps}
/>
Usage
<script lang="ts">
import { Label } from '$lib/components/ui/label/index.js';
</script><Label for="email">Your email address</Label>