Forms

Examples and documentation for the forms component

Form Basics

Basic Form

AJAX Form

Title-Slug Component

Basic Title-Slug (Auto Mode)

...

Post Title-Slug (Create Mode)

sample-post-title

Category Name-Slug (Manual Mode)

technology

Top-Right Position

sample-article-title

Input Types

Input Sizes

sm
md
lg

Form Elements

Basic Radio Button Group
Uses buttons as visual representation
Radio Button Group with Icons
Icon-Only Radio Button Group
Basic Native Radio Group
Uses native radio inputs with custom styling
Radio Group with Help Text
Perfect for getting started
Best for growing businesses
For large organizations
Stretched Layout (Equal Width)
Vertical Layout (Default)
Horizontal Layout (Auto-sized)
Stretched Layout (Equal Width Columns)
Inline Layout (Compact)

Textarea

File Upload

Selectize Inputs

Switches

Text Editors

Color Pickers

Basic Color Picker

Advanced Color Picker

Date & Time Pickers

Date Pickers

Time Pickers

Input Groups

Input with Button Suffix

Input with Icon Prefix

Input with Both Prefix and Suffix

$

Input with Text Prefix and Suffix

https://
.com

With Status: Success

$
Looks good

With Status: Error

$

With Status: Warning

$

With Status: Info

https://
.com
Enter domain without protocol

Password Input with Toggle Button

Search Input with Clear Button

Form Layouts

Two Column Layout

Compact Form

Three Column Grid
Auto Grid Layout
Compact Layout
Comfortable Layout
Inline Layout

This is a description

Default Layout

Validation States

Success State

Looks good!

Error State

Warning State

Info State

Usernames can include letters, numbers, and dots

Disabled State

Readonly State

Required State

Selector Bindings (Live Text API)

Live Preview Targets
Selector binding preview image
Fallback title for preview
Fallback description for preview card.
Fallback social title

Advanced Features

Form with Loading State

Processing...

Please wait while we process your request

Unsaved Changes Warning