Label

Renders an accessible label associated with controls.

For form fields, use the Field component which includes built-in label, description, and error handling.

Installation


pnpm dlx shadcn@latest add @force-ui-svelte/label

Usage

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

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

Label in Field

For form fields, use the Field component which includes built-in FieldLabel, FieldDescription, and FieldError components.

<script lang="ts">
  import { Field, FieldLabel } from "$lib/components/ui/field/index.js";
  import { Input } from "$lib/components/ui/input/index.js";
</script>
 
<Field>
  <FieldLabel for="email">Your email address</FieldLabel>
  <Input id="email" />
</Field>