Bilal UI
Bilal UIalpha
Components

Input

Displays a form input field or a component that looks like an input field.

Last updated: March 7, 2026

Basic Input

Default and disabled input states.

Clearable Input

An input with an inline clear action that resets and refocuses the field.

Outlined Input

Clean bordered input for standard forms.

Filled Input

Muted filled style for dense layouts.

Ghost Input

Low-emphasis dashed style for secondary fields.

Search Input

Input with a leading search icon.

Password Toggle Input

Password field with show/hide toggle.

Error State Input

Validation error style with inline helper message.

Only letters, numbers, and hyphens are allowed.

Success State Input

Validation success style with inline confirmation.

Looks good, this email is available.

Floating Label Input

Input with a floating label treatment.

Compact Input

Small-height input for tight interfaces.