Form Components

Text Input

Single-line text field with ripple hover animation

Default with Ripple

Full Name

This will be displayed publicly

With Icon (Left)

Email Address

Error State

Username

Username already taken

Success State

Username

Username available

Password with Ripple

Password

Disabled

Account ID

Cannot be changed

Textarea

Multi-line text field with ripple hover animation

Default with Ripple

Description

Max 500 characters 0/500

Select / Dropdown

Selection with ripple hover animation

Native Select with Ripple

Category

Select category Strategy Research Prototype

Custom Dropdown with Ripple

Strategy Mode

Simple

Simple

Advanced

Expert

Checkbox

Multiple selection with ripple hover animation

Single Checkbox with Ripple

Enable notifications

Checkbox Group with Ripple

Interests

Strategy

Research

Prototyping

States (No Ripple)

Checked Disabled Checked + Disabled

Radio Button

Single selection with ripple hover animation

Simple Radio Group with Ripple

Notification Frequency

Daily

Weekly

Monthly

With Descriptions

Plan

Free Basic features for personal use

Pro Advanced features for professionals

Team Collaboration features for teams

Toggle / Switch

On/off control with ripple hover animation

Simple Toggle with Ripple

Dark Mode

With Description

Email Notifications Receive updates about your strategies

Disabled States (No Ripple)

Disabled Off

Disabled On

Search Input

Specialized search with ripple hover animation

Default Search with Ripple

Pill Search with Ripple

Buttons

Action buttons with ripple hover animation

Primary Button with Ripple

Create Strategy

Secondary Button with Ripple

Cancel

Form Layouts

Common form layout patterns with ripple effects

Complete Form with Ripple

Strategy Name

Description

Category

Select category Growth Retention Engagement

Cancel

Create Strategy

Specifications

Component sizing and ripple animation parameters

Property	Value	Usage
Ripple Colors	#FB923C → #F472B6 → #93C5FD	Orange → Pink → Blue sequence
Animation Interval	25ms	Smooth wave propagation
Max Radius	15	Wave spread distance
Input Height	44px	All single-line inputs, buttons
Border Radius	8px	Inputs, textareas, dropdowns
Focus Ring	3px, rgba(251,146,60,0.15)	Orange glow on focus
Touch Target	44px minimum	All interactive elements

State Colors

Color palette for different form states

Ripple Orange

#FB923C

Ripple Pink

#F472B6

Ripple Blue

#93C5FD

Focus Border

#FB923C

Error Border

#F472B6

Success Border

#3B82F6