Label

Label element for form controls. Provides accessible names and improves usability.

Installation

Import

import { Label } from '@svelte-atoms/core/label';

Preset Configuration

Customize the label appearance using presets

You can customize the default styles for Label components by defining presets in your configuration:

Examples

Explore different label variations

Basic Label

Simple label with input

Email Address

Code

<Label for="email">Email Address</Label>
<Input.Root>
  <Input.Control id="email" type="email" />
</Input.Root>

Required Field

Mark required fields clearly

Username *

Code

<Label for="username">
  Username <span class="text-red-500">*</span>
</Label>
<Input.Root>
  <Input.Control id="username" required />
</Input.Root>

With Description

Add helpful text below label

Bio

Tell us about yourself

Code

<Label for="bio">Bio</Label>
<p class="text-sm text-muted-foreground">
  Tell us about yourself
</p>
<Input.Root>
  <Input.Control id="bio" />
</Input.Root>

API Reference

Label Props

Prop

Type

Default

Description

for

string

ID of associated form control

class

string

Additional CSS classes

Accessibility

Built-in Accessibility Features

• Always use for attribute to associate with input
• Place labels consistently (before or after inputs)
• Make required fields clear to screen readers
• Use semantic label element
• Ensure sufficient color contrast

Input

Link