OpenSourceUIOpenSourceUIOpensource UI
GitHub—
Components / Docs

Inputs

14 components you can copy and paste into your React or Next.js project. Each includes setup steps, source code, and a live preview.

Components

14 ready to copy — open any card for full setup and source.

Checkbox Field Input / Inputs

Accessible checkbox with custom mark, inline label, hint, and error. Controlled or uncontrolled checked state.

Free · copy & paste ready

Type to filter the list.

Combobox Field Input / Inputs

Searchable combobox with filtered listbox, keyboard navigation, click-outside close, and hidden field for form posts.

Free · copy & paste ready

Must match your ID document.

Date Field Input / Inputs

Custom calendar popover with month navigation, today shortcut, min/max limits, and styled day grid — no native browser picker.

Free · copy & paste ready

Drop your file hereDrag & drop or click anywhere

No file selected

PDF, PNG, JPG, JPEG · max 5.0 MB

PDFPNGJPGJPEG

PDF, PNG, or JPG up to 5 MB.

File Upload Field Input / Inputs

Card-style file upload with drag-and-drop zone, browse button, format/size hints, typed file rows, and remove actions.

Free · copy & paste ready

We never share your email.

Floating Label Field Input / Inputs

Outlined floating label that rests on the border notch when focused or filled — matches Material-style fields with autofill detection.

Free · copy & paste ready

https://

Include the path after your domain.

Input Group Field / Inputs

Grouped input with prefix and suffix slots — URLs, currency, units. Wrapper border highlights on focus; inputs use border-only focus with ring-0.

Free · copy & paste ready

Use at least 8 characters with a number and symbol.

Password Field Input / Inputs

Password input with show/hide toggle, hint text, and error state. Keeps autocomplete defaults and accessible visibility control.

Free · copy & paste ready

+1

We will send a verification code by SMS.

Phone Field Input / Inputs

Phone field with dial-code prefix and live US-style formatting. Returns raw digits via onChange for validation and API calls.

Free · copy & paste ready

Payment method

Radio Group Field Input / Inputs

Card-style radio group for checkout and settings flows. Vertical or horizontal layout, descriptions, and arrow-key navigation.

Free · copy & paste ready

Search Input / Inputs

Search field with leading icon and clear button. Controlled or uncontrolled value, hidden native cancel, and keyboard-friendly reset.

Free · copy & paste ready

Shipping rates vary by region.

Select Field Input / Inputs

Custom listbox select with styled dropdown, keyboard navigation, click-outside close, and hidden input for native form posts.

Free · copy & paste ready

Email notifications

Receive product updates and release notes.

Switch Field Input / Inputs

Toggle switch with role=switch, keyboard support, hidden input for forms, and label/hint/error layout.

Free · copy & paste ready

As shown on your government ID.

Text Field Input / Inputs

Standard labeled text field with hint and error states. Supports all native input types, required marker, disabled, and full a11y wiring.

Free · copy & paste ready

0/500

Textarea Field Input / Inputs

Multiline field with live character count, max length guard, resize support, and the same label/hint/error pattern as text fields.

Free · copy & paste ready

On this

page

Jump to a section on this page.

Platinum slotAvailable

Feature your product here.

Sticky card next to every component — highest-intent placement.

Claim this card