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 @destyler/vue
Terminal window 
      
        

          

            npm
             
            install
             
            @destyler/label @destyler/react
Terminal window 
      
        

          

            npm
             
            install
             
            @destyler/label @destyler/svelte
Terminal window 
      
        

          

            npm
             
            install
             
            @destyler/label @destyler/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:

id
string
The unique identifier of the machine.
getRootNode
() => ShadowRoot | Node | Document
A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
dir(default: "ltr")
"ltr" | "rtl"
The document's text/writing direction.

Data Attributes

Root

attribute
description
data-scope
label
data-part
root

File Upload

Number Input