Label

A control that adds a label to an input element.

View code

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
`root`	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`

On This Page