Label

Preview

Installation

pnpm add fancy-ui-svelte

import { Label } from 'fancy-ui-svelte'

Usage

svelte

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

<Label />

Examples

Basic Usage

svelte

<script lang="ts">
	import { Label } from "$lib/fancy-ui/label";
</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 "$lib/fancy-ui/label";
</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 "$lib/fancy-ui/label";
	import { FormField } from "$lib/fancy-ui/form-field";
</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>

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