# Label

> A form label with a decorative required asterisk, wired to a FormField's context when it has one.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Forms
- Tags: label, form, accessibility
- Docs: https://fancy-ui.rama.app/docs/components/label
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/label

## Import

```svelte
<script lang="ts">
  import { Label } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { Label } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `for` | `string` | — | Explicit target id. Inside a FormField, the field's own control id wins |
| `required` | `boolean` | `false` | Renders the required asterisk. Inside a FormField, the field's own `required` wins |
| `class` | `string` | — | Additional CSS classes |
| `ref` | `HTMLLabelElement \| null` | `null` | Bindable element reference |

## Snippets

| Snippet | Description |
| --- | --- |
| `children` | The label text/content |

## Examples

### Basic Usage

```svelte
<script lang="ts">
	import { Label } from "fancy-ui-svelte";
</script>

<div class="flex flex-col gap-1.5">
	<Label for="basic-usage-email">Email</Label>
	<input
		id="basic-usage-email"
		type="email"
		placeholder="you@example.com"
		class="border-input bg-background placeholder:text-muted-foreground focus-visible:ring-ring/50 focus-visible:border-ring w-full rounded-lg border px-3 py-[9px] text-[13px] outline-none focus-visible:ring-2"
	/>
</div>
```

### Required

The asterisk is decoration — the accessible cue is the control's own required.

```svelte
<script lang="ts">
	import { Label } from "fancy-ui-svelte";
</script>

<div class="flex flex-col gap-1.5">
	<Label for="required-username" required>Username</Label>
	<input
		id="required-username"
		type="text"
		required
		placeholder="Choose a username"
		class="border-input bg-background placeholder:text-muted-foreground focus-visible:ring-ring/50 focus-visible:border-ring w-full rounded-lg border px-3 py-[9px] text-[13px] outline-none focus-visible:ring-2"
	/>
</div>
```

### With FormField

for and required resolve from context — nothing to wire by hand.

```svelte
<script lang="ts">
	import { Label } from "fancy-ui-svelte";
	import { FormField } from "fancy-ui-svelte";
</script>

<!--
  Inside a FormField, a hand-placed Label needs neither `for` nor `required`
  — it reads both straight off the field's own context. That is the escape
  hatch for label markup beyond FormField's own `label` string prop: skip
  that prop and render a Label yourself as part of `children`.

  A context-aware control (Input and friends, elsewhere in this library)
  reads its id and aria wiring off the same context automatically. This
  plain <input> cannot do that, so it mirrors the id FormField was given —
  see the FormField docs for the full, no-manual-wiring picture.
-->
<FormField id="display-name" required description="This is how your name appears to other members.">
	{#snippet children()}
		<Label>Display name</Label>
		<input
			id="display-name"
			type="text"
			placeholder="Ada Lovelace"
			aria-describedby="display-name-description"
			class="border-input bg-background placeholder:text-muted-foreground focus-visible:ring-ring/50 focus-visible:border-ring mt-1.5 w-full rounded-lg border px-3 py-[9px] text-[13px] outline-none focus-visible:ring-2"
		/>
	{/snippet}
</FormField>
```