Composes stable label, description, message, and control relationships.
@combric/react · v1.1.1 · Current
import { Field, FieldDescription, FieldMessage } from "@combric/react";Load the native stylesheet with @import "@combric/react/css";. This path does not require Tailwind.
Use your work address.
Enter a valid email.
import { Field, FieldDescription, FieldMessage, Input, Label } from "@combric/react";
export function Example() {
return <Field invalid><Label>Email</Label><Input defaultValue="invalid" aria-invalid="true" /><FieldDescription>Use your work address.</FieldDescription><FieldMessage>Enter a valid email.</FieldMessage></Field>;
}Use your work address.
import { Field, FieldDescription, Input, Label } from "@combric/react";
export function Example() {
return <Field><Label htmlFor="work-email">Work email</Label><Input id="work-email" type="email" required /><FieldDescription>Use your work address.</FieldDescription></Field>;
}| Name |
|---|
Field |
FieldDescription |
FieldMessage |
| Property / capability | Published contract |
|---|---|
| Contract | invalid |
| Contract | FieldDescription |
| Contract | FieldMessage |
Composes mounted aria-describedby relationships without dangling IDs; validation remains consumer-owned.
Combric classes and canonical --combric-* variables provide the package presentation. Consumer className extends the required class; it does not replace the component contract.