Label

An accessible label for form controls, built on Bits UI.

Email

<script lang="ts">
  import { Label } from "$lib/components/ui/label";
  import { Input } from "$lib/components/ui/input";
</script>
 
<div class="flex max-w-xs flex-col gap-2">
  <Label for="email">Email</Label>
  <Input id="email" type="email" placeholder="you@example.com" />
</div>

Installation

npx lily-svelte@latest add label

Install the lily base and `utils` (run once per project).

npx lily-svelte@latest init

Copy the label source from the registry into `$lib/components/ui/label`.

Usage

<script lang="ts">
	import { Label } from '$lib/components/ui/label';
	import { Input } from '$lib/components/ui/input';
</script>
 
<div class="flex flex-col gap-2">
	<Label for="name">Name</Label>
	<Input id="name" placeholder="example" />
</div>

← Kbd Menubar →