🟢 Label

Basic

Renders an accessible label associated with controls.

The NLabel component is used already in different components like Checkbox, Radio, FormGroup, etc. but can also be used as a standalone component if you want more customization.

Prop	Default	Type
as	`label`	AsTag \| Component
asChild	`boolean`	Change the default rendered element for the one passed as a child, merging their props and behavior.
for	`string`	The id of the element the label is associated with.

Width

Max. width

Height

Max. height

Props

import type { LabelProps } from 'radix-vue'
import type { HTMLAttributes } from 'vue'

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

export interface NLabelProps extends BaseExtensions, LabelProps {
}

Presets

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,
]

Component

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

const props = defineProps<NLabelProps>()

const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props

  return delegated
})
</script>

<template>
  <Label
    v-bind="delegatedProps"
    :class="
      cn(
        'label-base',
        props.class,
      )
    "
  >
    <slot />
  </Label>
</template>

Edit this page on GitHub

Components🟢 Kbd

Components🟢 Link