Skip to main content

Label

The Label component renders a styled <label> element with support for required and error states. It is designed to be used with form components like Input and Select.

Props​

NameTypeDefaultDescription
childrenstringRequiredThe text content of the label.
requiredbooleanfalseIf true, a required indicator (asterisk) is displayed.
errorsstring[] | string | ReactNode—If present, applies error styling to the label.
contextualClassstring—An optional class name to be added to the label element.

Usage​

Basic Label​

This is the default appearance of the label.

<Label>Default Label</Label>

Preview​

Required Label​

Set the required prop to true to indicate that the associated field is mandatory.

<Label required>Required Label</Label>

Preview​

Label with Error​

When the errors prop is provided, the label will be styled to indicate an error state.

<Label errors={["This field has an error"]}>Label with Error</Label>

Preview​

Styles & customization​

Runtime classes​

  • kui-label: The base class applied to the <label> element.

Data Attributes​

  • data-required="true": Applied when the required prop is true.
  • data-error="true": Applied when the errors prop is provided.

Tokens used by the default styles​

  • Colors: --kui-danger-500 for the required indicator and error state.
  • Typography: Inherits font size and weight from its parent.

Types (reference)​

import { ComponentPropsWithoutRef, ReactNode } from "react";

export type LabelProps = ComponentPropsWithoutRef<"label"> & {
  children: string;
  required?: boolean;
  errors?: string[] | string | ReactNode;
  contextualClass?: string;
};