# input

Glowing Range Slider

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

4.3k30.9k7.1kOpen

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

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

Floating label inputs

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

34200Open

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

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

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.

80500Open

Auto-Advance OTP Input · Aurora Teal

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

61900Open

Featured UI Elements Live preview

Liquid Glow Range Slider · Ultra Violet

A velvety range control: glowing fill, pulsing thumb and a springy value bubble that trails the drag. Rendered in the Ultra Violet palette.

48900Open

Liquid Glow Range Slider · Cyber Lime

A velvety range control: glowing fill, pulsing thumb and a springy value bubble that trails the drag. Rendered in the Cyber Lime palette.

45000Open

Liquid Glow Range Slider · Sunset Amber

A velvety range control: glowing fill, pulsing thumb and a springy value bubble that trails the drag. Rendered in the Sunset Amber palette.

78100Open

Liquid Glow Range Slider · Rose Gold

A velvety range control: glowing fill, pulsing thumb and a springy value bubble that trails the drag. Rendered in the Rose Gold palette.

74100Open

Liquid Glow Range Slider · Ocean Sky

A velvety range control: glowing fill, pulsing thumb and a springy value bubble that trails the drag. Rendered in the Ocean Sky palette.

40900Open

Liquid Glow Range Slider · Mint Breeze

A velvety range control: glowing fill, pulsing thumb and a springy value bubble that trails the drag. Rendered in the Mint Breeze palette.

39300Open

Liquid Glow Range Slider · Candy Pink

A velvety range control: glowing fill, pulsing thumb and a springy value bubble that trails the drag. Rendered in the Candy Pink palette.

53900Open

Liquid Glow Range Slider · Royal Gold

A velvety range control: glowing fill, pulsing thumb and a springy value bubble that trails the drag. Rendered in the Royal Gold palette.

20700Open

Inline Form Validation · Rose Gold

Signup fields validate as you type: green check borders, rule hints, shake on bad submit, success flare. Rendered in the Rose Gold palette.

26300Open

Inline Form Validation · Ocean Sky

Signup fields validate as you type: green check borders, rule hints, shake on bad submit, success flare. Rendered in the Ocean Sky palette.

71100Open

Inline Form Validation · Mint Breeze

Signup fields validate as you type: green check borders, rule hints, shake on bad submit, success flare. Rendered in the Mint Breeze palette.

74300Open

Inline Form Validation · Candy Pink

Signup fields validate as you type: green check borders, rule hints, shake on bad submit, success flare. Rendered in the Candy Pink palette.

80900Open

Inline Form Validation · Royal Gold

Signup fields validate as you type: green check borders, rule hints, shake on bad submit, success flare. Rendered in the Royal Gold palette.

47700Open

Inline Form Validation · Crimson Heat

Signup fields validate as you type: green check borders, rule hints, shake on bad submit, success flare. Rendered in the Crimson Heat palette.

66500Open

Inline Form Validation · Deep Indigo

Signup fields validate as you type: green check borders, rule hints, shake on bad submit, success flare. Rendered in the Deep Indigo palette.

67200Open

Inline Form Validation · Aurora Teal

Signup fields validate as you type: green check borders, rule hints, shake on bad submit, success flare. Rendered in the Aurora Teal palette.

23000Open

Form with Floating Labels

Input group with floating labels, validation states and focus ring.

Floating Input

Input with floating label that lifts and shrinks on focus.

Search Input Icon

Search field with leading icon and clear button on input.

Star Rating Input

Interactive star rating with hover preview and filled state.

Range Slider

Custom range slider with filled track and draggable thumb.

Input Group Button

Input with attached action button (e.g. copy or search).

Tag Input Field

Tag editor with removable chips and Enter-to-add.

Floating-Label Input Pair

Two inputs whose labels float above on focus, with error and success states.

Gradient Range Slider

Single range slider with a gradient-filled track and thumb glow.

Star Rating with Half Stars

Interactive star rating supporting halves with hover preview and value label.