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 Form Input Example

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.

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

Disabled State (grayed out and uneditable)

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

If you use the readonly HTML attribute, the input will look similar to a normal one, but is not editable.