Forms Gallery

Input controls, buttons, selectors, and form elements

Input Components - Flexible Styling

Default Input

Default*

With Email Icon

Email Address*

Large Input with Custom Styling

Large Input

Minimal Style

Minimal Input

Gradient Border

Fancy Input

Value:

Password Component

Password*

Value: (empty)

TextArea Component - Custom Styles

Default TextArea

Description

Large Rounded TextArea

Notes

With Validation & Counter

Message*

Auto-resize Minimal Style

Comments

Values:

Checkbox Component

Size and Style flexibility

Tiny checkbox (size-3.5)

Default checkbox (size-4.5)*

Large checkbox (size-5.5)

Extra large round checkbox

Simple color customization

Custom shape and color checkbox(full customization example)

Custom gradient checkbox(another customization)

Disabled checkbox

checkbox value: true

Radio Buttons

Size flexibility

Value:

RadioGroup

Custom Colors

Connection

Ambition

Possibilities

Warmth

Value: Earth

RadioGroup Buttons

Button Style Radio Group

💰 Basic ($9/mo)

🚀 Pro ($19/mo)

🏢 Enterprise

Value: enterprise

RadioGroup Pills

Pill Style Options

🌅 Morning

☀️ Afternoon

🌙 Evening

Value:

RadioGroup Cards

Card Style Selection

🙋 Request Help

🤝 Offer Service

↔️ Both

Value:

RadioGroup Ping

With Animated Ring Effect

Low Priority

Medium Priority

High Priority

Critical

Value:

RadioButton Customizations

Individual Customization

Gradient Dot

With glow shadow

Icon Instead of Dot

Toggle Switch

Sizes - Flexible with Class Overrides

Extra 2x Small Toggle --> dot:size-2, switch:w-5 h-3Checked:false

Extra Small Toggle --> dot:size-3, switch:w-7 h-4Checked:true

Small Toggle --> dot:size-4, switch:w-9 h-5Checked:false

Medium Toggle (default) --> dot:size-5, switch:w-11 h-6Checked:true

Large Toggle --> dot:size-6, switch:w-13 h-7Checked:true

Extra Large Toggle --> dot:size-7, switch:w-15 h-8Checked:false

Extra 3x Large Toggle --> dot:size-9, switch:w-19 h-10Checked:true

Toggle

Sizes - Flexible with Class Overrides

Extra Small Toggle (dot: w-3 h-3)

Medium Toggle (default dot: w-5 h-5)*

Extra large Toggle (w-7 h-7)

Extra 2x Large Toggle (w-9 h-9)

Toggle Group

Notification Settings - Toggle Group

Custom Styled Toggle Group

Select Component - Flexible Styling

Default Select

Country

Large Rounded Select

Priority Level

Minimal Select

Status

Pill Style Select

Selected country: gb

OTP Input Component

Value: (empty)

ListBox - Custom Select

Country

Value: gb

Sliders

Volume

[object Object]

010

Search Radius

[object Object] miles

0 miles20 miles

Price

$[object Object]

$0$1000

Completion

NaN%

0%100%

[object Object]

Small Size

[object Object]

Large Size:

[object Object]

[object Object] fl oz

0 fl oz100 fl oz

[object Object]

0100

$[object Object]

$0$100

Disabled Slider

[object Object]

0100

Explore More Components

Browse other component categories