Skip to content
Ben Serkan ZararsızComponents

Inputs8

Fields that explain themselves: real labels, visible focus, errors announced to screen readers. Type into them – they all work.

Floating Label

  • CSS
  • States

The label rises into the border on focus or once filled. States for error, success and disabled – the error shakes once.

State
Accent Indigo
12px
56px

Underline

  • CSS

Big type on a single line that draws itself in on focus – from the center or from the left.

Line grows from
Accent Indigo
2px
0.40s
24px

One-Time Code

  • JS
  • Keyboard

Boxes that advance on their own. Backspace steps back, arrows move, and pasting a full code fills everything at once.

Verification code

6
Accent Indigo
48px
8px
12px

Password Strength

  • JS
  • a11y

Show/hide toggle, a four-step meter and a live checklist. Every rule says "met" or "not met" to screen readers.

Use a long, unique password

  • At least 10 characters – not met
  • Upper and lower case – not met
  • A number – not met
  • A symbol – not met
Accent Indigo
Strong color Emerald
12px

Tag Input

  • JS
  • Keyboard

Enter or comma adds, Backspace removes the last tag, every chip has its own labelled remove button.

  • Branding
  • UX/UI
  • Motion
8
Accent Indigo
Chip Auto
Chip text Auto
12px
16px

Number Stepper

  • JS
  • Keyboard

Hold a button to repeat. Arrow keys, Page Up/Down, Home and End work on the value, which rolls in the direction it changed.

Guests
2
0
12
Step
Accent Indigo
24px

Autosize Textarea

  • CSS
  • JS

Grows with every line (CSS field-sizing, with a JS fallback). The ring fills up and turns amber, then red past the limit.

140 characters left
140
2
Accent Indigo
16px