Inputs

How to Use

To use an input field, start with the <input> element and apply classes to control size and style.

Basic structure:

<input type="text" class="[sizeClass] [styleClass]" placeholder="Placeholder text">

Size Classes

  • smallInput – Compact field for dense UI
  • mediumInput – Default size (most common)
  • largeInput – Spacious, useful on mobile or minimalistic layouts

Style Classes

  • gradientInput – Adds a colorful or decorative border/background

You can mix size and style classes as needed (e.g., class="smallInput gradientInput").

Input Variants and When to Use Them

✅ Default Input

  • Example: <input type="text" placeholder="default input">
  • Purpose: Used when no special styling is needed. Clean, minimal.
  • Use When: You just need a plain, standard input for quick forms or internal tools.

✅ gradientInput

  • Example: <input type="text" class="gradientInput" placeholder="Enter name">
  • Purpose: Adds visual flair or thematic styling (e.g., brand gradients or subtle attention).
  • Use When: The form is part of a marketing page or when you want to elevate the UI.

✅ Size Variants

  • smallInput
    • Example: <input type="text" class="smallInput" placeholder="First Name">
    • Use When: Space is tight or the input is part of a compact component (e.g., in a card or modal)
  • mediumInput
    • Example: <input type="text" class="mediumInput" placeholder="Email address">
    • Use When: General use. Best default for most forms.
  • largeInput
    • Example: <input type="text" class="largeInput" placeholder="Search...">
    • Use When: You want a bold, easy-to-read input—like a search bar or prominent signup form.

Combo: Gradient + Size

You can combine style and size:

<input type="text" class="largeInput gradientInput" placeholder="Username">

Use combos for stylized forms that require both visual polish and size control.

Accessibility Tips

  • Always include a placeholder or <label> to explain what the input is for.
  • Consider aria-label for screen readers if the label is not visible.
  • Ensure gradient inputs still have strong contrast and focus outlines for keyboard navigation.

Examples

The placeholders in the inputs are their class names.