Form Input

Style input and textarea with our custom designs, adjustable sizes, and focus states for a modern, user-friendly look.

Introduction

Creating sleek, user-friendly forms is easier than ever with Astral.CSS. Our form-input class is designed to give your <input> fields a modern look, complete with customizable sizes, focus effects, and color options. Whether you're working with type="text", type="password", type="email", or other input types, we've got you covered.

Basic Input Example

Here's a simple example to get started with the form-input class:

Colorful Inputs for Every Mood

Want your input fields to stand out? With Astral.CSS, you can choose from several stylish color options to match your design.

Custom Styling for Your Perfect Input

Not feeling the default look? No problem! Astral.CSS includes utility classes that let you easily tweak the design. For example, if you prefer rounded corners for your input fields, simply add the rounded-corners class.

Different States for Your Form Inputs

Astral.CSS gives you flexibility with various input states. Use these to communicate different behaviors to users—whether the field is focused, disabled, or read-only.

Normal State (default look)

Focused State (when the user clicks or tabs into the input)

Disabled State (grayed out and uneditable)

Readonly State (looks like a normal input but can't be edited)