Input Component

The Input component provides a versatile text input field with support for labels, help text, error states, and various HTML input attributes. It is built using React.forwardRef for easy integration with form libraries and direct DOM access.

Basic Input

Card Name

<Input
  label="Card Name"
  name="cardNameBasic"
  placeholder="Enter card name"
/>

Input with Placeholder Only

<Input
  name="placeholderOnly"
  placeholder="Search for a specific card..."
/>

Required Input

Player Name

This field is required.

<Input
  label="Player Name"
  name="playerNameRequired"
  placeholder="Enter your name"
  required
  helpText="This field is required."
/>

Input with Help Text

Email Address

We'll never share your email with anyone else.

<Input
  label="Email Address"
  name="emailHelp"
  type="email"
  placeholder="your.email@example.com"
  helpText="We'll never share your email with anyone else."
/>

Input with Error State

Password

Password must be at least 8 characters.

<Input
  label="Password"
  name="passwordError"
  type="password"
  placeholder="Enter your password"
  error="Password must be at least 8 characters."
  defaultValue="short" // Use defaultValue for uncontrolled initial value in examples
/>

Number Input

Quantity

<Input
  label="Quantity"
  name="quantityNumber"
  type="number"
  defaultValue="1"
  min="0"
/>