Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

• Import path: @enadhq/enad-react-sdk/client/ui-resolver.
• Live playground: /components/base-ui/label.

When to use it

Use Label whenever a control needs an accessible text label. It is the default companion for Input, Checkbox, Select, and grouped form rows.

Even when a layout feels obvious visually, keep the explicit label if the control still needs a durable accessible name.

Always connect label and control

Prefer htmlFor plus a matching control id. That keeps click targets, screen reader announcements, and focus behavior predictable.

Composition notes

• Keep helper copy, hints, and error text adjacent to the field group, not nested inside the label itself.
• Add required markers or badges inside the label row when needed, but keep the main text short and plain.
• Use layout utilities on the surrounding container instead of turning Label into a spacing wrapper.

Accessibility guidance

A good label names the field clearly without repeating the placeholder. Placeholders disappear once users type, so they should support the field, not replace the label.

For checkboxes and radios, the same Label component can wrap or sit beside the control. The important part is to keep the association explicit so pointer and keyboard users get the same behavior.

Contract scope

• Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
• Public import: @enadhq/enad-react-sdk/client/ui-resolver.
• Playground route: /sandbox?component=Label.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes