Label - HapplyUI

A label component with required asterisk indicator, optional sub-text, info tooltip, and a composed shorthand for common usage.

Installation

bunx @happlyui/cli@latest add label

These are automatically installed when you add this component.

import * as Label from "@/components/ui/label"

<Label.Composed required sub="(Optional)" info="Helpful tooltip">
  Field Name
</Label.Composed>

Label with asterisk, sub-text, and info icon.

Last Name*(Optional)Email*

<Label.Root>
  Last Name
  <Label.Asterisk />
  <Label.Sub>(Optional)</Label.Sub>
  <Label.InfoIcon />
</Label.Root>

Props-driven label with required, sub, and info.

Last Name*(Optional)Email*Disabled Label*(Optional)

<Label.Composed required sub="(Optional)" info="We will use this email to send you updates.">
  Email
</Label.Composed>

The root label element built on Radix Label.

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	Disable the label and apply disabled styling to all children

Required field asterisk indicator in primary color.

Prop	Type	Default	Description

Secondary text displayed after the label.

Prop	Type	Default	Description

Standalone info circle SVG icon with default w-5 h-5 and text-text-disabled-300 color. Override via className.

Prop	Type	Default	Description

Info icon wrapped in a tooltip. Pass tooltip text as children.

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Tooltip content
`iconClassName`	`string`	-	Override the default icon className

Props-driven label that renders Root, Asterisk, Sub, and Info based on props.

Prop	Type	Default	Description
`required`	`boolean`	`false`	Show asterisk indicator
`sub`	`React.ReactNode`	-	Sub-text rendered after the label
`info`	`React.ReactNode`	-	Info tooltip content
`disabled`	`boolean`	`false`	Disable the label