Label

Renders an accessible label associated with controls.

With Checkbox

Accept terms and conditions

With Input

Disabled

With Textarea

<script lang="ts">
  import { Checkbox } from '@sveltery/components/checkbox';
  import { Example, ExampleWrapper } from '@sveltery/components/example';
  import { Field } from '@sveltery/components/field';
  import { Input } from '@sveltery/components/input';
  import { Label } from '@sveltery/components/label';
  import { Textarea } from '@sveltery/components/textarea';
</script>

<ExampleWrapper>
  <Example title="With Checkbox">
    <Field orientation="horizontal">
      <Checkbox id="label-demo-terms" />
      <Label for="label-demo-terms">Accept terms and conditions</Label>
    </Field>
  </Example>
  <Example title="With Input">
    <Field>
      <Label for="label-demo-username">Username</Label>
      <Input id="label-demo-username" placeholder="Username" />
    </Field>
  </Example>
  <Example title="Disabled">
    <Field data-disabled={true}>
      <Label for="label-demo-disabled">Disabled</Label>
      <Input id="label-demo-disabled" placeholder="Disabled" disabled />
    </Field>
  </Example>
  <Example title="With Textarea">
    <Field>
      <Label for="label-demo-message">Message</Label>
      <Textarea id="label-demo-message" placeholder="Message" />
    </Field>
  </Example>
</ExampleWrapper>

Installation

Install the dependencies

pnpm add cn class-variance-authority

Copy the component

Copy the following files into src/lib/components/ui/label.

src/lib/components/ui/label/Label.svelte

<script lang="ts">
  import type { HTMLLabelAttributes } from 'svelte/elements';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: HTMLLabelAttributes = $props();
</script>
<label data-slot="label" {...props} class={cn('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', classProp)}>
  {@render children?.()}
</label>

src/lib/components/ui/label/index.ts

export { default as Label } from './Label.svelte';

Update the import paths

Change the imports to match your project setup.

Usage

<script lang="ts">
  import { Label } from '$lib/components/ui/label';
</script>

<Label for="email">Your email address</Label>