Basic Form Elements

Essential form controls for building user-friendly interfaces.

Text Input Fields

Standard text input controls

First Name

Your first name as it appears on official documents

Last Name

Your last name or surname

Email Address

We'll never share your email with anyone else

Phone Number

Include country code for international numbers

Address

Full address including city and postal code

Bio / Description

Brief description or biography (optional)

Selection Controls

Dropdown, radio, and checkbox inputs

Department

Select your primary department

Current Semester

Your current academic semester

Student Status

Full-time Student

Part-time Student

Exchange Student

Your current enrollment status

Additional Services

Library Access

Parking Permit

Meal Plan

Gym Membership

Select additional services you need

Form States & Styling

Different input states and styling options

Normal Input

This is a normal input field

Focus Input

This input has focus styling

Disabled Input

This input is disabled

Readonly Input

This input is read-only

Valid Input

This looks good!

Invalid Input

Please provide a valid input.

Input Groups & Sizing

Input groups with icons and different sizes

Input Groups

Username

Website

https://

Price

$ .00

Input Sizing

Large Input

Normal Input

Small Input

Form Controls

Plain Text

Floating Label

Email address