Field

#Default usage

#Usage

import {
  Field,
  FieldDescription,
  FieldError,
  FormField,
  Input,
} from "@froggdesign/enter-ui";

export function Example() {
  return (
    <FormField description="Used for public package names." label="Package" required>
      <Input defaultValue="@froggdesign/enter-ui" />
    </FormField>
  );
}

#Patterns

#Accessibility

FieldError uses role="alert". Pair labels with controls and connect descriptions or errors with native aria attributes when forms need explicit associations.

#API

• Field supports invalid.
• FormField accepts label, description, error, required, optional, and labelProps.
• FieldDescription and FieldError extend paragraph props.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.