FieldLabel
A field label (a native <label>) with optional description and info tooltip.
import { FieldLabel } from "@cynco-labs/ui";Example
import { FieldLabel, Input } from "@cynco-labs/ui";
export default function FieldLabelDemo() {
return (
<div className="flex flex-col gap-3 max-w-[320px]">
<div>
<FieldLabel htmlFor="field-label-code" tooltip="Unique within your chart of accounts">
Account code
</FieldLabel>
<Input id="field-label-code" placeholder="e.g. 4000" />
</div>
<div>
<FieldLabel
htmlFor="field-label-name"
description="Optional"
descriptionId="field-label-name-hint"
>
Display name
</FieldLabel>
<Input id="field-label-name" aria-describedby="field-label-name-hint" />
</div>
</div>
);
}Use
Fields that need a hint.
Props
Children, htmlFor (the control's id), optional description + descriptionId, tooltip, empty, and any <label> props.
Notes
The description and tooltip render outside the <label>, so the control's name is just the label text; point the control's aria-describedby at descriptionId to read the hint with it. With a description or tooltip, className goes on the wrapper and <label> props on the label. empty renders an aria-hidden spacer.