Label

Label defines how EnterUI handles a precise form label with required and optional affordances, including default structure, accessible states, and token-driven styling.

#Default usage

<div className="docs-preview-stack">
  <div className="docs-preview-stack">
    <Label htmlFor="label-package" required>Package</Label>
    <Input id="label-package" defaultValue="@froggdesign/enter-ui-react" />
  </div>
  <div className="docs-preview-stack">
    <Label htmlFor="label-notes" optional>Release notes</Label>
    <TextArea id="label-notes" rows={3} />
  </div>
</div>

#Import

import { Input, Label, TextArea } from "@froggdesign/enter-ui-react";

#Accessibility

Use htmlFor with a matching control id. Required and optional indicators are visual hints; keep validation rules in form logic.

#API

• required displays a required marker.
• optional displays an optional marker.
• Extends native label 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.