Label

Overview

The Label component is a customizable label for form elements. It shows a required indicator by default, supports an optional tooltip and suffix, and follows consistent styling across the design system.

Variations

Optional

By default a label shows a required indicator (*). Set optional to mark the field as not required — this hides the indicator.

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

Use the suffix prop to place an element — such as an action button — on the right side of the label.

Installation

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

// ...

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

Usage

Anatomy

Label wraps Radix’s label primitive and renders the label text plus, when configured, a required indicator, a tooltip, and a suffix.

<Label htmlFor="username" tooltipContent="Shown on hover">
  Username
</Label>

• Association — htmlFor ties the label to a form control by its id, so clicking the label focuses the control.
• Required indicator — the label shows a required asterisk by default. Passing optional removes it; there is no “(optional)” text — the absence of the asterisk is the only visual difference.
• Tooltip — when you pass tooltipContent, the label renders an IconWithTooltip informer next to the text; tooltipProps configures that icon and tooltip.
• Suffix — a suffix element is laid out to the right of the label text, alongside any tooltip, for actions like “add”.
• Empty guard — the label renders nothing when it has no children.

Best practices

Do

• Always set htmlFor to the control’s id so the label and field are programmatically linked.
• Use optional to signal non-required fields rather than adding “(optional)” text yourself.
• Keep label text to a short noun phrase; move supplementary explanation into tooltipContent.

Don’t

• Don’t rely on the asterisk alone to communicate that a field is required — also mark the field itself (see Accessibility).
• Don’t overload the suffix with multiple actions; keep it to a single, clear control.

Content

• Name the field for what it collects (“Email”, “Repository name”), not how it’s used internally.
• Keep tooltip content to a sentence or two of genuinely helpful context.

Accessibility

Keyboard

• The tooltip informer and any suffix control render as real buttons, so they’re reachable and operable by keyboard.

Labeling

• htmlFor associates the label with its control, so assistive tech announces the field’s name and clicking the label moves focus to the control.

Known limitations

• The required asterisk is aria-hidden. It’s visual only, so also convey the required state on the field itself (e.g. required / aria-required on the input) for assistive tech.

Properties

Properties

Label

Prop	Required	Default	Type
children	true		ReactNode
htmlFor	false		string
optional	false	false	boolean
disabled	false		boolean
tooltipContent	false		Exclude<ReactNode, boolean | null | undefined>
tooltipProps	false		IconWithTooltipProps
suffix	false		ReactNode
className	false		string

IconWithTooltipProps

tooltipProps accepts the same shape as IconWithTooltip:

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