Label - EnterUI

FormsUpdated May 3, 2026

#Default usage

Package

Release notesOptional

#Usage

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

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

#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.

Edit this page