Label

Guidelines#

Use it for every Input, Textarea, Select, Checkbox, RadioGroup item and Switch; link it with htmlFor.

What you provide: a noun phrase in sentence case with no trailing colon ("Daily sending limit"). Mark optional fields "(optional)" instead of starring required ones. Put explanations in a HelpTooltip or a help line below the field, not in the label.

Disabled: dims to 50% when its peer field is disabled or inside a group with data-disabled="true".

Facts#

API#

TypeScript declarations emitted from src/components/ui/label.tsx (the module also exports its other parts).

interface LabelProps extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {
    className?: string;
}
declare function Label({ className, ...props }: LabelProps): any;
export { Label };

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function App() {
  return h("div", { className: "grid grid-cols-2 gap-8" },
    h("div", { className: "flex flex-col gap-2" },
      h(DC.Label, { htmlFor: "lb-1" }, "Deal name"),
      h(DC.Input, { id: "lb-1", defaultValue: "Northwind — annual plan" })),
    h("div", { className: "flex flex-col gap-2 group", "data-disabled": "true" },
      h(DC.Label, { htmlFor: "lb-2" }, "Owner (set by the routing rule)"),
      h(DC.Input, { id: "lb-2", defaultValue: "Victor Cole", disabled: true })));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Forms#