affectUI › Components

React input components

Form controls with the details done: an OTP input, a combobox, a date range picker, a file dropzone, a filter menu and a stepper form.

Each is one .tsx file without dependencies, styled for light and dark mode.

9 React components – 2 free.

  • Billing Schedule – Build a billing phase – start date, duration, products with repeats and timing, discount, minimum and live totals
  • Combobox – Pick one or many from a searchable, grouped list – chips with avatars, highlighted matches, create-on-the-fly and full keyboard support
  • Date Range Picker – Presets and two calendars with a hover preview, comparison with the previous period or year, full keyboard control
  • Dropzone – Drag files in and watch them upload – fanning documents, colored type badges, progress with time left, errors with retry
  • Filter Menu – Grouped filters with removable chips, collapsible checkbox groups, Clear all and full keyboard control
  • Integration Settings – Settings card for a connected service – on/off switch, API key, validated site address, time zone and a save bar
  • OTP Input – The verification code field done right – a gliding focus ring, paste and SMS autofill, a calm shake on errors and a morph into Verified
  • Prompt Library – Saved prompt templates with variables – type straight into the sentence, watch the finished prompt assemble below, and use it once every variable is filled
  • Stepper Form – A multi-step flow for onboarding and setup – steps that fill and check off, sliding steps, a card that morphs to each step, inline validation and a success state