Skip to content
Destyler UI Destyler UI Destyler UI
Docs
Label

Label

Renders an accessible label associated with controls.

Features

Install

Install the component from your command line.

Terminal window 
      
        

          

            npm
             
            install
             
            @destyler/{label,vue}
Terminal window 
      
        

          

            npm
             
            install
             
            @destyler/{label,react}
Terminal window 
      
        

          

            npm
             
            install
             
            @destyler/{label,svelte}
Terminal window 
      
        

          

            npm
             
            install
             
            @destyler/{label,solid}

Anatomy

Import all parts and piece them together.

<script setup lang="ts">
import * as label from '@destyler/label'
import { normalizeProps, useMachine } from '@destyler/vue'
import { computed, useId } from 'vue'


const [state, send] = useMachine(label.machine({ id: useId() }))


const api = computed(() => label.connect(state.value, send, normalizeProps))
</script>


<template>
  <label v-bind="api.getRootProps()" />
</template>
import * as label from '@destyler/label'
import { normalizeProps, useMachine } from '@destyler/react'
import { useId, useState } from 'react'


export default function Label() {
  const id = useId()
  const [state, send] = useMachine(label.machine({ id }))
  const api = label.connect(state, send, normalizeProps)


  return (
    <>
      <label {...api.getRootProps()} ></label>
    </>
  )
}
<script lang="ts">
  import * as label from '@destyler/label'
  import { normalizeProps, useMachine } from "@destyler/svelte"


  const id = $props.id()
  const [state, send] = useMachine(label.machine({ id }))


  const api = $derived(label.connect(state, send, normalizeProps))
</script>


<label {...api.getRootProps()}></label>
import * as label from '@destyler/label'
import { normalizeProps, useMachine } from '@destyler/solid'
import { createMemo, createUniqueId } from 'solid-js'


export default function Label() {
  const id = createUniqueId()
  const [state, send] = useMachine(label.machine({ id }))
  const api = createMemo(() => label.connect(state, send, normalizeProps))


  return (
    <>
      <label {...api().getRootProps()}></label>
    </>
  )
}

Methods and Properties

Machine Context

The label machine exposes the following context properties:

ids
Partial<{ root: string; }>
The ids of the elements in the label. Useful for composition.
id
string
The unique identifier of the machine.
getRootNode
() => ShadowRoot | Node | Document
A root node to correctly resolve document in custom environments.

Machine API

The label api exposes the following methods:

isHovered
boolean
Whether the label is hover

Data Attributes

Root

name
desc
data-scope
label
data-part
root

Dynamic

OTP Input