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

<VStack align="stretch" gap={12} fullWidth>
  <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" />
</VStack>

#Import

import { Input, VStack } 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

The control uses the shared medium (8px) input radius, including focus and invalid states. PhoneInput, PasswordInput, and NumberInput inherit this shape without page-level styling.

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