Label

Labels name form controls so users and assistive technologies know what data to enter.

Try it

Usage

Place RuiLabel as the first child of RuiField. It automatically associates with the nested control.

import { RuiLabel } from '@ecopages/radiant-ui/label';
import { RuiField } from '@ecopages/radiant-ui/field';
import { RuiInput } from '@ecopages/radiant-ui/input';
 
<RuiField name="username">
  <RuiLabel>Username</RuiLabel>
  <RuiInput />
</RuiField>

Always visible

Labels should remain visible when the field is focused. Do not rely on placeholder text as a label replacement.

Theming

Label text maps to the on-background role, never a palette step:

Override at the theme layer, not in component CSS.

Accessibility

• Labels are linked to controls via for / id wiring inside RuiField.
• Write labels as nouns or short phrases, such as "Email address", not "Enter your email".
• Required fields should indicate requirement in the label or with adjacent text, not color alone.

API

RuiLabel is a presentational JSX view over a native <label>, no custom element. It sets the field-label attribute so RuiField discovers it and wires for / aria-labelledby.

Props

CSS classes

Public classes (documented via @cssclass):

Theme roles