# form

Interactive Star Rating

Five stars with hover preview, spring pop on fill and locked-in labels from Terrible to Legendary.

4.4k31.8k7.2kOpen

Glowing Range Slider

A filled-track slider whose violet→fuchsia fill follows the value, with a glowing white thumb.

4.3k30.9k7.1kOpen

Gliding Segmented Control

iOS-style segmented control with a cyan-violet gliding thumb that springs between options.

3.9k28.6k6.3kOpen

Glow Spring Checkboxes

Checkboxes that pop with an overshoot spring, gradient fill and violet glow; label brightens via :has().

HTMLCSSReactAdvanced

3.5k27.8k5.9kOpen

Spotlight Border Input

Inputs whose 1.5px border lights up with a radial spotlight that follows the cursor, plus focus fill.

2.8k21.4k4.3kOpen

Neon Ring Toggle Switches

Springy glowing toggle switches in violet, magenta and cyan — the thumb pops with neon bloom when switched on.

23100Open

Spring-Pop Star Rating

Five oversized stars with overshoot spring animation, glow and live label (Terrible → Legendary).

26300Open

Sliding Pill Segmented Control

Text and icon segmented controls where a gradient pill springs between options with overshoot easing.

24100Open

Gradient stepper progress nav

4-step wizard indicator: numbered nodes light up with gradient borders as the fill bar advances.

32800Open

Focus-glow email capture input

Input that ignites with a fuchsia ring, top light spill and tinted background on focus, plus a gradient CTA.

31200Open

Shake error-feedback form

Wrong password triggers a horizontal shake with red ring; correct password shows green success — instant feedback.

29800Open

Floating label inputs

Labels rise, shrink and turn cyan when the field focuses or has content — classic material-style form polish.

34200Open

Selectable pricing radio cards

Plan picker where whole cards are radio targets — checked card gets a gradient border, filled tick and glow.

35600Open

Add/remove tag chips input

Tag field: chips pop in with a spring, ✕ removes with a scale-out; type and Enter to add new slug-style tags.

32400Open

Password strength meter

Live strength scoring (length, case, digits, symbols) driving a colored gradient bar with missing-rule hints.

35200Open

Dual-thumb range price slider

Two overlaid range inputs form a min/max selector with a gradient selected band and live mono price labels.

33400Open

Star rating input with hover preview

Five stars light up on hover with spring scale on the previewed one; clicking locks the rating and label.

36500Open

Featured UI Elements Live preview

Glow Slide Toggle · Candy Pink

A pill toggle switch whose knob springs across and sets the track glowing when enabled. Rendered in the Candy Pink palette.

73900Open

Glow Slide Toggle · Royal Gold

A pill toggle switch whose knob springs across and sets the track glowing when enabled. Rendered in the Royal Gold palette.

40700Open

Glow Slide Toggle · Crimson Heat

A pill toggle switch whose knob springs across and sets the track glowing when enabled. Rendered in the Crimson Heat palette.

31100Open

Glow Slide Toggle · Deep Indigo

A pill toggle switch whose knob springs across and sets the track glowing when enabled. Rendered in the Deep Indigo palette.

25800Open

Glow Slide Toggle · Aurora Teal

A pill toggle switch whose knob springs across and sets the track glowing when enabled. Rendered in the Aurora Teal palette.

59600Open

Glow Slide Toggle · Mono Pearl

A pill toggle switch whose knob springs across and sets the track glowing when enabled. Rendered in the Mono Pearl palette.

8500Open

Glow Slide Toggle · Ultra Violet

A pill toggle switch whose knob springs across and sets the track glowing when enabled. Rendered in the Ultra Violet palette.

79700Open

Glow Slide Toggle · Cyber Lime

A pill toggle switch whose knob springs across and sets the track glowing when enabled. Rendered in the Cyber Lime palette.

65000Open

Draw-on Checkbox · Deep Indigo

A checkbox whose checkmark is stroke-drawn with a dash animation when ticked. Rendered in the Deep Indigo palette.

66600Open

Draw-on Checkbox · Aurora Teal

A checkbox whose checkmark is stroke-drawn with a dash animation when ticked. Rendered in the Aurora Teal palette.

22400Open

Draw-on Checkbox · Mono Pearl

A checkbox whose checkmark is stroke-drawn with a dash animation when ticked. Rendered in the Mono Pearl palette.

18900Open

Draw-on Checkbox · Ultra Violet

A checkbox whose checkmark is stroke-drawn with a dash animation when ticked. Rendered in the Ultra Violet palette.

42900Open

Draw-on Checkbox · Cyber Lime

A checkbox whose checkmark is stroke-drawn with a dash animation when ticked. Rendered in the Cyber Lime palette.

75400Open

Draw-on Checkbox · Sunset Amber

A checkbox whose checkmark is stroke-drawn with a dash animation when ticked. Rendered in the Sunset Amber palette.

72100Open

Draw-on Checkbox · Rose Gold

A checkbox whose checkmark is stroke-drawn with a dash animation when ticked. Rendered in the Rose Gold palette.

66900Open

Draw-on Checkbox · Ocean Sky

A checkbox whose checkmark is stroke-drawn with a dash animation when ticked. Rendered in the Ocean Sky palette.

59300Open

Floating Glow Input · Ultra Violet

A text field with a floating label and a gradient focus ring that breathes. Rendered in the Ultra Violet palette.

58400Open

Floating Glow Input · Cyber Lime

A text field with a floating label and a gradient focus ring that breathes. Rendered in the Cyber Lime palette.

52100Open

Floating Glow Input · Sunset Amber

A text field with a floating label and a gradient focus ring that breathes. Rendered in the Sunset Amber palette.

9600Open

Floating Glow Input · Rose Gold

A text field with a floating label and a gradient focus ring that breathes. Rendered in the Rose Gold palette.

49400Open

Floating Glow Input · Ocean Sky

A text field with a floating label and a gradient focus ring that breathes. Rendered in the Ocean Sky palette.

41800Open

Floating Glow Input · Mint Breeze

A text field with a floating label and a gradient focus ring that breathes. Rendered in the Mint Breeze palette.

55800Open

Floating Glow Input · Candy Pink

A text field with a floating label and a gradient focus ring that breathes. Rendered in the Candy Pink palette.

61000Open

Floating Glow Input · Royal Gold

A text field with a floating label and a gradient focus ring that breathes. Rendered in the Royal Gold palette.

27800Open

Auto-Advance OTP Input · Rose Gold

Six-box verification code field: auto-advance, paste-to-fill, shake on wrong code, glow on success. Rendered in the Rose Gold palette.

79200Open

Auto-Advance OTP Input · Ocean Sky

Six-box verification code field: auto-advance, paste-to-fill, shake on wrong code, glow on success. Rendered in the Ocean Sky palette.

71600Open

Auto-Advance OTP Input · Mint Breeze

Six-box verification code field: auto-advance, paste-to-fill, shake on wrong code, glow on success. Rendered in the Mint Breeze palette.

35200Open

Auto-Advance OTP Input · Candy Pink

Six-box verification code field: auto-advance, paste-to-fill, shake on wrong code, glow on success. Rendered in the Candy Pink palette.

47600Open

Auto-Advance OTP Input · Royal Gold

Six-box verification code field: auto-advance, paste-to-fill, shake on wrong code, glow on success. Rendered in the Royal Gold palette.

66800Open

Auto-Advance OTP Input · Crimson Heat

Six-box verification code field: auto-advance, paste-to-fill, shake on wrong code, glow on success. Rendered in the Crimson Heat palette.

82800Open

Auto-Advance OTP Input · Deep Indigo

Six-box verification code field: auto-advance, paste-to-fill, shake on wrong code, glow on success. Rendered in the Deep Indigo palette.