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>
    <TextInput id="username" type="text" />
  </>
)

Optional

With tooltip (Informer)

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

Suffix

API Reference

interface IconWithTooltipProps 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
tooltipContent	false		Exclude<ReactNode, boolean | null | undefined>
tooltipProps	false		IconWithTooltipProps
suffix	false		ReactNode