Label

A label element that associates with a form control.

Show Code

<script setup lang="ts">
import { Label } from '@destyler-ui/vue'
</script>

<template>
  <main>
    <Label.Root>
      Username
    </Label.Root>
  </main>
</template>

import { Label } from '@destyler-ui/react'

export function Basic() {
  return (
    <main>
      <Label.Root>
        Username
      </Label.Root>
    </main>
  )
}

import { Label } from '@destyler-ui/solid/label'

export function Basic() {
  return (
    <main>
      <Label.Root>Username</Label.Root>
    </main>
  )
}

<script lang="ts">
  import { Label } from '@destyler-ui/svelte'
</script>

<main>
  <Label.Root>Username</Label.Root>
</main>

Anatomy

<script setup lang="ts">
import { Label } from '@destyler-ui/vue'
</script>

<template>
  <Label.Root />
</template>

import { Label } from '@destyler-ui/react'

export default function Basic() {
  return (
    <Label.Root />
  )
}

import { Label } from '@destyler-ui/solid'

export default function Basic() {
  return (
    <Label.Root />
  )
}

<script lang="ts">
  import { Label } from '@destyler-ui/svelte'
</script>

<Label.Root>Username</Label.Root>

Examples

Basic

Show Code

<script setup lang="ts">
import { Label } from '@destyler-ui/vue'
</script>

<template>
  <main>
    <Label.Root>
      Username
    </Label.Root>
  </main>
</template>

import { Label } from '@destyler-ui/react'

export function Basic() {
  return (
    <main>
      <Label.Root>
        Username
      </Label.Root>
    </main>
  )
}

import { Label } from '@destyler-ui/solid/label'

export function Basic() {
  return (
    <main>
      <Label.Root>Username</Label.Root>
    </main>
  )
}

<script lang="ts">
  import { Label } from '@destyler-ui/svelte'
</script>

<main>
  <Label.Root>Username</Label.Root>
</main>

Root Provider

Show Code

<script setup lang="ts">
import { Label, useLabel } from '@destyler-ui/vue'

const label = useLabel()
</script>

<template>
  <main>
    <Label.RootProvider :value="label">
      Email Address
    </Label.RootProvider>
  </main>
</template>

import { Label, useLabel } from '@destyler-ui/react'

export function RootProvider() {
  const label = useLabel()

  return (
    <main>
      <Label.RootProvider value={label}>
        Email Address
      </Label.RootProvider>
    </main>
  )
}

import { Label, useLabel } from '@destyler-ui/solid/label'

export function RootProvider() {
  const label = useLabel()

  return (
    <main>
      <Label.RootProvider value={label}>Email Address</Label.RootProvider>
    </main>
  )
}

<script lang="ts">
  import { Label, useLabel } from '@destyler-ui/svelte'

  const id = $props.id()
  const label = useLabel({ id })
</script>

<main>
  <Label.RootProvider value={label}>Email Address</Label.RootProvider>
</main>

API Reference

Root

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
id	—	string The unique identifier of the machine.

Context

No serializable props or emits are declared for this part.

RootProvider

Prop	Default	Type
value*	—	MachineApi<PropTypes>
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
ids	—	label.ElementIds

Context

Prop	Default	Type
children*	—	(context: UseLabelReturn) => ReactNode

RootProvider

Prop	Default	Type
value*	—	UseLabelReturn
children	—	null | string | number | bigint | false | true | react82.ReactElement<unknown, string | react82.JSXElementConstructor<any>> | Iterable<react82.ReactNode> | react82.ReactPortal | Promise<string | number | bigint | boolean | react82.ReactPortal | react82.ReactElement<unknown, string | react82.JSXElementConstructor<any>> | Iterable<react82.ReactNode> | null | undefined>

Root

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js38.JSX.LabelHTMLAttributes<HTMLLabelElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.
ids	—	label.ElementIds

Context

Prop	Default	Type
children*	—	(context: UseLabelContext) => Element

RootProvider

Prop	Default	Type
value*	—	UseLabelReturn
asChild	—	(props: (userProps?: solid_js38.JSX.LabelHTMLAttributes<HTMLLabelElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"label">]>
children	—	Snippet<[]> | undefined
id	—	string
ids	—	ElementIds | undefined

Context

Prop	Default	Type
render	—	Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/index").UseLabelReturn]>

RootProvider

Prop	Default	Type
value*	—	UseLabelReturn
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"label">]>
children	—	Snippet<[]> | undefined