Skip to content

NbLabel is a lightweight label element for associating descriptive text with form controls. Use it standalone or let NbTextInput manage it automatically.

Basic Usage ​

vue
<template>
  <NbLabel for="my-input">Workspace name</NbLabel>
  <input id="my-input" type="text" placeholder="my-workspace" />
</template>

Required field ​

Sizes ​

Disabled ​

Accessibility ​

  • Renders a native <label> element; clicking it focuses the associated input via for.
  • The required asterisk is aria-hidden="true" so screen readers use the required attribute on the input instead.

Props ​

PropTypeDefaultDescription
forstringundefinedMaps to the HTML for attribute (links to input)
requiredbooleanfalseAppends a red * asterisk
disabledbooleanfalseReduces opacity
size'sm' | 'md''md'sm renders 11px uppercase; md renders 12px

Slots ​

SlotDescription
defaultThe label text