Composable form structure for label, control, description, and error text.
Field defines how EnterUI handles composable form structure for label, control, description, and error text, including default structure, accessible states, and token-driven styling.
Use FormField for the common label plus control pattern.
Used for public package names.
<FormField description="Used for public package names." label="Package" required>
<Input defaultValue="@froggdesign/enter-ui-react" />
</FormField>import {
Field,
FieldDescription,
FieldError,
FormField,
Input,
} from "@froggdesign/enter-ui-react";Invalid state is applied to the wrapper and the control.
Visible in package metadata.
Use a stable semantic tag.
FieldError uses role="alert". Pair labels with controls and connect descriptions or errors with native aria attributes when forms need explicit associations.
Field supports invalid.FormField accepts label, description, error, required, optional, and labelProps.FieldDescription and FieldError extend paragraph props.Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.