Lightweight form components for modern React apps. Build beautiful, mobile-first forms with just the parts you need. From smart selects to masked inputs, everything is approach-agnostic whether you're using raw React state, Formik, or anything else.
- Single & multiple selects with async search and options viewport
- Mobile-first select UI with smooth animations:
- Based on @yoozzeek/react-context-modal npm package
- Masked text inputs (date, phone, currency, tokens, custom)
- Single & multiple file uploads
- Switch, range slider and checkbox field
- Building atoms: button, badge, loaders and header
- Easy theming via CSS variables and CSS classes
- Tree-shakeable: only import what you need
Brought to you by the non-profit Bitkind.org.
Install required peer dependencies first:
yarn add @yoozzeek/react-context-modal react-imask simplebar-reactThen install formkit-lite package:
yarn add @yoozzeek/react-formkit-liteAnd import the CSS into your app or SSR/SSG page:
// Remember to import
import "simplebar-react/dist/simplebar.min.css";
import "@yoozzeek/react-context-modal/dist/index.css"
// Formkit-lite default styles
import "@yoozzeek/react-formkit-lite/dist/index.css"Field for selecting a single or multiple values from a list of options. Highly responsive on mobile, supports virtualized lists of thousands of items. Includes dynamic term search and async loading from APIs. Can be easily wrapped to create specific components like SelectCountry, SelectCity, or SelectCategories.
import SelectField from "@yoozzeek/react-formkit-lite/Select";
<SelectField
id="id"
name="name"
label="Label"
options={optionsList}
value={value}
onChange={(_field, value) => setValue(value)}
/>More than just an input field, supports basic text and number types, and can apply dynamic input masks (either custom or built-in). Flexible and adaptable for common text-based use cases.
import TextField from "@yoozzeek/react-formkit-lite/Text";
import { phoneNumberWithCodeMask } from "@yoozzeek/react-formkit-lite/phoneNumberMask";
<TextField
id="id"
name="name"
label="Text field"
placeholder="Text field..."
type="text"
mask={phoneNumberWithCodeMask}
value={value}
onChange={(e) => setValue(e.target.value)}
/>A preconfigured date input based on TextField, using a built-in date mask. Simplifies working with MM-dd-yyyy formatted dates.
import DateField from "@yoozzeek/react-formkit-lite/Date";
<DateField
id="date"
name="date"
label="Label"
placeholder="MM-DD-YYYY"
value={forms.values.date}
onChange={(field, value) => handleFieldChange(field, value)}
/>A responsive, cross-browser checkbox field that returns a boolean value. Includes helpful extras for state handling. Can be grouped with CheckboxGroup for multiple checkbox scenarios.
import CheckboxField from "@yoozzeek/react-formkit-lite/Checkbox";
<CheckboxField
id="id"
name="name"
label="Label"
value={value}
onClick={(checked) => setValue(checked)}
/>Like CheckboxField but for single-choice inputs. Comes with a RadioGroup wrapper for defining option groups.
import RadioField from "@yoozzeek/react-formkit-lite/Radio";
<RadioField
name="name"
label="Label"
value="value"
checkedValue={value}
onChange={() => setValue("new_value")}
/>A mobile-friendly slider for selecting numeric ranges. Includes an expanded click/touch area for improved usability, especially on touch devices.
import RangeField from "@yoozzeek/react-formkit-lite/Range";
<RangeField
id="id"
name="name"
label="Label"
min={0}
max={100}
step={1}
value={value}
onValueChange={(value) => setValue(value)}
/>A toggle-style input that functions like a checkbox but appears as a switch. Offers a modern, compact alternative to traditional checkboxes.
import SwitchField from "@yoozzeek/react-formkit-lite/Switch";
<SwitchField
id="id"
name="name"
label="Label"
value={value}
onChange={setValue}
/>Robust file upload component supporting multiple files. Works either in immediate-upload mode or with deferred processing using objectURL and FormData. Flexible for both instant preview and batch upload workflows.
import UploadMultipleFiles from "@yoozzeek/react-formkit-lite/UploadMultipleFiles";
<UploadMultipleFiles
label="Label"
files={[]}
onFilesAdded={() => {}}
onFilesRemoved={() => {}}
/>A drag-and-drop (or click-to-select) area for uploading a single file. Fully configurable: file type restrictions, custom messages, and UX tweaks are all supported.
import UploadArea from "@yoozzeek/react-formkit-lite/UploadArea";
<UploadArea onSelectFile={() => {}} />Atoms available for building your own UI:
Button- View Demo | Code ExampleLoader- View Demo | Code ExampleHeader- View Demo | Code Example
All built-in and custom masks are powered by the imask lib.
phoneNumberMaska few country support (more coming)dateMaskMM-dd-yyyy or custom formattokenAmountMaskfor fiat money amountmoneyAmountMaskfor crypto token amount
Various use-case examples are provided in the examples directory. Contributions and additional examples are welcome.
Use CSS variables to match your theme:
:root {
}All class names are prefixed with formkit-lite-* for easy targeting.
Each component provides a set of classes that you can overwrite. For more information check the source code please.
- Tree-shakeable components
- Styles provided in a single CSS file
Based on two npm packages:
This project is licensed under the MIT License. See LICENSE for details.