mielui
Forms

Label

A styled native label that names a form control.

Installation

pnpm dlx @mielui/svelte add label

Usage

Match for to the control's id. Clicking any part of the label, including elements you put in its children, focuses that control.

required shows a mark after the text. The mark is hidden from assistive technology, so set required on the control too. A label placed after a peer control dims when that control is disabled; when the label comes first, add the disabled styling yourself.

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

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

Examples

Required

Label draws the mark itself. Input and Textarea do the same for their built-in label when they are required, and Field.Label follows Field.Root.

Disabled

API reference

Label

Labels a form control.

  • class
    (string & (ClassValue | null))

    Classes added to the element.

  • children
    Snippet<[]>

    Content rendered inside.

  • required
    boolean

    Shows a required mark after the text. The mark is hidden from assistive technology, so set required on the control as well.

    Default false