Melt UI Logo

Label

A control that adds a label to an input element.

Features

  • Supports nested controls
  • Disables text selection when double clicking the label
  • Can be used multiple times from a single instance of the builder

Anatomy

  • Root: The root container for the label

Usage

To create a label, use the createLabel builder function and apply the root action to the label element.

    <script lang="ts">
  import { createLabel } from '@melt-ui/svelte'
 
  const label = createLabel()
</script>
 
<label for="name" use:label>Name</label>
<input type="text" id="name" />

API Reference

createLabel

Returned Props

Returned Prop Type Description
root
-

The builder store used to create the label root.

root

Data Attributes

Data Attribute Value
[data-melt-label]

Present on all label elements.