Input

Input defines how EnterUI handles a single-line text input with polished focus and invalid states, including default structure, accessible states, and token-driven styling.

#Default usage

<div className="docs-preview-stack">
  <Input aria-label="Package name" defaultValue="@froggdesign/enter-ui-react" />
  <Input aria-label="Disabled package" disabled defaultValue="@froggdesign/enterui-locked" />
  <Input aria-label="Invalid package" invalid defaultValue="invalid scope" />
</div>

#Import

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

#Patterns

#Accessibility

Input renders a native input. Provide a visible Label or an aria-label. The invalid prop maps to aria-invalid.

#API

• invalid toggles invalid styling and aria state.
• All native input props are supported.
• Use className for local control styling.

#Styling

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