Label

The Label component is a customizable label for form elements. It includes an optional required indicator and follows consistent styling across the design system.

Usage

import { Label } from '@harnessio/ui/components'

// ...

return (
  <>
    <Label htmlFor="username">Username</Label>
    <input id="username" type="text" />
  </>
)

Optional

With informer

The Label component supports displaying a tooltip with additional information. Use the informerContent prop to provide the tooltip content, and pass additional configuration via the informerProps prop.

Suffix

API Reference

interface InformerProps extends Omit<TooltipProps, "children"> {
  className?: string;
  /**
   * If disabled, the tooltip will not be shown
   */
  disabled?: boolean;
  iconProps?: IconPropsV2;
}

Prop	Required	Default	Type
htmlFor	false		string
optional	false	false	boolean
className	false		string
children	true		ReactNode
informerContent	false		Exclude<ReactNode, boolean | null | undefined>
informerProps	false		InformerProps
suffix	false		ReactNode