form · Normal DOM only

Label

Form label wired to a control via htmlFor — uses Radix Label.Root for click-to-focus.

Use Label directly when you compose a custom layout that Field can not express (mixed-grid forms, inline checkbox-with-label, table cells). For typical "label + control + hint" stacks reach for Field — it owns the IDs.

Inside a Twenty front-component, prefer the bridge import
This Label is Radix-based and uses data-* selectors that the Twenty Remote DOM bridge strips. For panel content, import { Label } from @8maverik8/twenty-design/twenty-ui — re-exports the same primitive from twenty-sdk/ui, which Twenty has verified inside front-component'ов.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { Label } from '@8maverik8/twenty-design';

Examples

Inline label

tsx
<Label htmlFor="slug" required>Slug</Label>
<Input id="slug" placeholder="acme" />

Guidelines

✓
Use htmlFor matching the control’s id.Clicking the label focuses the control and screen readers announce the pairing.
✓
Mark required fields with the required prop.It renders a "*" coloured by --t-font-color-danger consistent with the rest of the system.
✕
Use Label for headings or static text — it implies an associated control.Screen readers will look for an input.