Forms

Accessible checkbox with label, description, indeterminate state, and three size options

• •Three sizes: sm, md, lg
• •Indeterminate state support
• •Accessible label and description

Accessible radio button group using fieldset and legend, with vertical and horizontal orientations

• •fieldset + legend for screen readers
• •Vertical and horizontal orientations
• •Per-option disabled state

Styled native select dropdown with label, error state, three sizes, and placeholder support

• •Custom styled arrow icon
• •Label and error message
• •Three sizes

Multiline text input with label, error state, and configurable resize behavior

• •Label and error message
• •Four resize options
• •Extends native textarea attributes

Range slider with fill track, value display, min/max labels, and custom thumb styling

• •Custom fill track (primary color)
• •Custom styled thumb
• •Label and live value display

A stepper input with increment / decrement buttons, min/max/step constraints, and three sizes.

• •Increment/decrement buttons
• •Min/max/step constraints
• •Direct keyboard input

A searchable dropdown select with filtering, clear button, disabled options, and optional description text.

• •Searchable with live filtering
• •Clear button to reset selection
• •Disabled individual options

A calendar date picker using react-day-picker with portal rendering, custom format strings, and clear button.

• •Calendar popup via react-day-picker
• •Portal rendering (never clipped by overflow)
• •Custom date format strings (date-fns)

Drag-and-drop file upload zone with file preview list, size validation, and multi-file support.

• •Drag and drop support
• •Click to browse
• •File size validation

Select a start and end date range with native date inputs, min/max validation, and night count display.

• •From and To date inputs
• •Automatic min-date enforcement
• •Night count badge

Hour and minute selects for time entry with 15-minute step intervals and controlled value support.

• •24-hour hour select
• •15-minute step intervals
• •Controlled value

Country code prefix dropdown with phone number input, supporting 6 country codes with flag emojis.

• •Country code prefix select with flags
• •6 preset country codes
• •Full number value callback

Chip-based multi-select dropdown with search filtering and keyboard-friendly chip removal.

• •Chip-style selected values
• •Searchable dropdown
• •Remove chip on click

Toolbar-based contentEditable rich text editor supporting bold, italic, underline, strikethrough, and list formatting.

• •Bold, italic, underline, strikethrough
• •Ordered and unordered lists
• •contentEditable based

OTP-style PIN input with configurable digit count, auto-advance, backspace support, and paste handling.

• •Auto-advance on digit entry
• •Backspace to go back
• •Paste support

Demo form with inline validation — required, minLength, and pattern rules — displaying errors on blur and submit.

• •Required, minLength, pattern validation rules
• •Errors show on blur
• •Full validation on submit

Searchable combobox with keyboard navigation, type-to-filter, and optional multi-select. Supports icons, descriptions, avatars, loading state, helper text, and error state.

• •Keyboard navigation (↑↓ Enter Escape Backspace)
• •Type-to-filter
• •Multi-select with chip tokens