Label

Renders an accessible label associated with controls.

Source
API reference

Examples

Basic

PropDefaultTypeDescription
aslabelAsTag, ComponentThe element or component this component should render as. Can be overwrite by asChild.
asChildbooleanbooleanChange the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
forstringstringThe id of the element the label is associated with.
labelstringstringThe label text, An alternative to the default slot.
Preview
Code

Slots

NamePropsDescription
default-The content slot.

Presets

shortcuts/label.ts 
type LabelPrefix = 'label'

export const staticLabel: Record<`${LabelPrefix}-${string}`, string> = {
  // base
  'label-base': 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:n-disabled',
}

export const dynamicLabel: [RegExp, (params: RegExpExecArray) => string][] = [
  // dynamic preset
]

export const label = [
  ...dynamicLabel,
  staticLabel,
]

Props

types/label.ts 
import type { LabelProps } from 'radix-vue'
import type { HTMLAttributes } from 'vue'

interface BaseExtensions {
  class?: HTMLAttributes['class']
}

export interface NLabelProps extends BaseExtensions, LabelProps {
  label?: string
}

Components

Label.vue
<script setup lang="ts">
import type { NLabelProps } from '../../types'
import { reactiveOmit } from '@vueuse/core'
import { Label } from 'radix-vue'
import { cn } from '../../utils'

const props = defineProps<NLabelProps>()

const rootProps = reactiveOmit(props, ['label', 'class'])
</script>

<template>
  <Label
    v-bind="rootProps"
    :class="
      cn(
        'label-base',
        props.class,
      )
    "
  >
    <slot>
      {{ label }}
    </slot>
  </Label>
</template>
Edit this page on GitHub
Kbd
Indicates input that is typically entered via keyboard.
Link
Provides a custom <NuxtLink> component to handle any kind of links within your application.