Label

Label names a form control. Set htmlFor to the control's id so a click on the label focuses or toggles the control. Inside a Field, use FieldLabel.

'use client';

import { Input } from '@/components/nxds/components/input/input';
import { Label } from '@/components/nxds/components/label/label';

export default function LabelWithInput() {
  return (
    <div className="nx:flex nx:flex-col nx:gap-2">
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" placeholder="you@example.com" />
    </div>
  );
}

This example also needs: Input.

Installation

npx nxds-cli@latest add label

Run npx nxds-cli@latest init first if nxds isn’t set up in your app yet. See Install.

Usage

import { Label } from '@/components/nxds/components/label/label';

Examples

Disabled

Dim the label when the checkbox placed before it is disabled.

Accept terms

'use client';

import * as React from 'react';

import { Checkbox } from '@/components/nxds/components/checkbox/checkbox';
import { Label } from '@/components/nxds/components/label/label';

export default function LabelDisabled() {
  const checkboxId = React.useId();

  // The label dims when its `nx:peer` sibling control is disabled.
  return (
    <div className="nx:flex nx:items-center nx:gap-2">
      <Checkbox id={checkboxId} disabled />
      <Label htmlFor={checkboxId}>Accept terms</Label>
    </div>
  );
}

This example also needs: Checkbox.

Props

Label

Label adds no props of its own; it accepts the props of the element or primitive it wraps.

Label names a form control. Set for to the control's id so a click on the label focuses or toggles the control. Inside a Field, use FieldLabel.

<script setup lang="ts">
import { Input } from '@/components/input';
import { Label } from '@/components/label';
</script>

<template>
  <div class="nx:flex nx:flex-col nx:gap-2">
    <Label for="email">Email</Label>
    <Input id="email" type="email" placeholder="you@example.com" />
  </div>
</template>

This example also needs: Input.

Installation

1
Install the following dependencies:
npm install @vueuse/core@^14.1.0 reka-ui@^2.11.0

Copy and paste the following code into your project.

components/label/Label.vue

<script setup lang="ts">
import { reactiveOmit } from '@vueuse/core';
import { Label as LabelRoot, type LabelProps as RekaLabelProps } from 'reka-ui';
import type { HTMLAttributes } from 'vue';

import { cn } from '../../lib/utils';

export interface LabelProps extends RekaLabelProps {
  class?: HTMLAttributes['class'];
}

const props = defineProps<LabelProps>();

const delegated = reactiveOmit(props, 'class');
</script>

<template>
  <LabelRoot
    v-bind="delegated"
    data-slot="label"
    :class="
      cn(
        'nx:flex nx:items-center nx:gap-2 nx:select-none nx:typography-label-default nx:text-foreground',
        'nx:peer-disabled:cursor-not-allowed nx:peer-disabled:text-disabled-foreground',
        props.class
      )
    "
  >
    <slot />
  </LabelRoot>
</template>

components/label/index.ts

export { default as Label, type LabelProps } from './Label.vue';

Keep each file at the path shown above it.
Paths are relative to packages/vue/src/. Keep the same folders under your @/ root, and the imports between files work without edits.

Usage

import { Label } from '@/components/label';

Examples

Disabled

Dim the label when the checkbox placed before it is disabled.

<script setup lang="ts">
import { useId } from 'vue';

import { Checkbox } from '@/components/checkbox';
import { Label } from '@/components/label';

const checkboxId = useId();
</script>

<template>
  <div class="nx:flex nx:items-center nx:gap-2">
    <Checkbox :id="checkboxId" disabled />
    <Label :for="checkboxId">Accept terms</Label>
  </div>
</template>

This example also needs: Checkbox.

Props

Label

Label adds no props of its own; it accepts the props of the element or primitive it wraps.