Label

Renders a native label and passes through its attributes. When it follows a disabled control that has the peer class, it dims to match.

Email address

<script lang="ts">
    import { Input } from '@sivir-ui/svelte/components/input';
    import { Label } from '@sivir-ui/svelte/components/label';
</script>

<div class="flex flex-col gap-1.5">
    <Label for="email">Email address</Label>
    <Input id="email" type="email" placeholder="you@sivir.dev" />
</div>

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add label

Usage

Set for to the control's id. Input and Textarea render their own label when you pass label, so use Label for custom layouts.

import { Label } from '@sivir-ui/svelte/components/label';
import { Input } from '@sivir-ui/svelte/components/input';

<Label for="email">Email</Label>
<Input id="email" type="email" />

Examples

With required indicator

Full name *

<script lang="ts">
    import { Input } from '@sivir-ui/svelte/components/input';
    import { Label } from '@sivir-ui/svelte/components/label';
</script>

<div class="flex flex-col gap-1.5">
    <Label for="name">Full name <span class="text-error">*</span></Label>
    <Input id="name" type="text" />
</div>

Disabled field

Username

<script lang="ts">
    import { Input } from '@sivir-ui/svelte/components/input';
    import { Label } from '@sivir-ui/svelte/components/label';
</script>

<div class="flex flex-col gap-1.5">
    <Label for="disabled">Username</Label>
    <Input id="disabled" type="text" disabled />
</div>

Anatomy

Label - Labels a form control.