Skip to main content

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, melt } from '@melt-ui/svelte'
 
  const {
    elements: { root }
  } = createLabel()
</script>
 
<label for="name" use:melt={$root}>Name</label>
<input type="text" id="name" />
	
    <script lang="ts">
  import { createLabel, melt } from '@melt-ui/svelte'
 
  const {
    elements: { root }
  } = createLabel()
</script>
 
<label for="name" {...$root} use:root>Name</label>
<input type="text" id="name" />

API Reference

createLabel

The builder function used to create the label component.

Props

Prop Default Type / Description

Elements

Element Description

The builder store used to create the label root.

root

The label element

Data Attributes

Data Attribute Value
[data-melt-label]

Present on all label elements.

Custom Events

Event Value
m-mousedown (e: ) => void