Label
Renders an accessible label associated with controls.
Loading preview…
1<script lang="ts">
2 import { Label } from './index.js';
3 import { Input } from '../input/index.js';
4</script>
5
6<div class="grid w-full max-w-sm gap-2">
7 <Label for="label-preview-email">Email</Label>
8 <Input id="label-preview-email" type="email" placeholder="you@example.com" />
9</div>
10Installation
1. Install dependencies
2. Copy these files into your project
- ~/components/label/index.ts
- ~/components/label/label.svelte
Usage
Use label to associate text with form controls via matching for / id.
1<script lang="ts">
2 import { Label } from '~/components/label';
3 import { Input } from '~/components/input';
4</script>
5
6<div class="grid gap-2">
7 <Label for="email">Email</Label>
8 <Input id="email" type="email" placeholder="you@example.com" />
9</div>