hecrj / Composable Form
Licence: bsd-3-clause
Build type-safe composable forms in Elm
Stars: ✭ 179
Programming Languages
elm
856 projects
Projects that are alternatives of or similar to Composable Form
React Controlled Form
Flexible, Modular & Controlled Forms for React and Redux
Stars: ✭ 121 (-32.4%)
Mutual labels: form-validation, form, forms
form-data-json
A zero dependency, cross browser library to easily get or set/manipulate form input values as/from a json object.
Stars: ✭ 37 (-79.33%)
Mutual labels: forms, form, form-validation
Final Form
🏁 Framework agnostic, high performance, subscription-based form state management
Stars: ✭ 2,787 (+1456.98%)
Mutual labels: form-validation, form, forms
Redux Form
A Higher Order Component using react-redux to keep form state in a Redux store
Stars: ✭ 12,597 (+6937.43%)
Mutual labels: form-validation, form, forms
React Hook Form
📋 React Hooks for form state management and validation (Web + React Native)
Stars: ✭ 24,831 (+13772.07%)
Mutual labels: form-validation, form, forms
ember-validity-modifier
Ember Octane addon to add custom validity (form validation) to form fields
Stars: ✭ 28 (-84.36%)
Mutual labels: forms, form, form-validation
Form bloc
🔥 Dart and Flutter Package 🔥 Easy Form State Management using BLoC pattern 🔥 Wizard/stepper forms, asynchronous validation, dynamic and conditional fields, submission progress, serialization and more! 🔥
Stars: ✭ 239 (+33.52%)
Mutual labels: form-validation, form, forms
vue-use-form
✅ A Vue.js composition API function to validate forms
Stars: ✭ 97 (-45.81%)
Mutual labels: forms, form, form-validation
FrontendForms
A module for ProcessWire CMS to create and validate forms on the frontend easily using the Valitron library.
Stars: ✭ 0 (-100%)
Mutual labels: forms, form, form-validation
Usetheform
React library for composing declarative forms, manage their state, handling their validation and much more.
Stars: ✭ 40 (-77.65%)
Mutual labels: form-validation, form, forms
react-cool-form
😎 📋 React hooks for forms state and validation, less code more performant.
Stars: ✭ 246 (+37.43%)
Mutual labels: forms, form, form-validation
React Final Form
🏁 High performance subscription-based form state management for React
Stars: ✭ 6,781 (+3688.27%)
Mutual labels: form-validation, form, forms
Jafar
🌟!(Just another form application renderer)
Stars: ✭ 107 (-40.22%)
Mutual labels: form-validation, form, forms
Yaaf
Easing the form object pattern in Rails applications
Stars: ✭ 161 (-10.06%)
Mutual labels: form-validation, form
Vue Formulate
⚡️ The easiest way to build forms with Vue.
Stars: ✭ 1,947 (+987.71%)
Mutual labels: form, forms
Vue Form Components
Clean & minimal vue form elements and form builder with validation
Stars: ✭ 120 (-32.96%)
Mutual labels: form-validation, form
Form Validation.js
The most customizable validation framework for JavaScript.
Stars: ✭ 127 (-29.05%)
Mutual labels: form-validation, form
Fielder
A field-first form library for React and React Native
Stars: ✭ 160 (-10.61%)
Mutual labels: form, forms
composable-form
This package allows you to build forms that are
- Composable: they can be extended and embedded in other forms.
- Type-safe: everything is safely tied together with compiler guarantees.
-
Maintainable: you do not need
view
code nor amsg
for each form field. - Concise: field validation and update logic are defined in a single place.
- Consistent: validation errors are always up-to-date with the current field values.
- Extensible: you can create your own custom fields and write custom view code.
Here is an example that defines a login form:
module Form.Login exposing (Output, Values, form)
import EmailAddress exposing (EmailAddress)
import Form exposing (Form)
type alias Values =
{ email : String
, password : String
, rememberMe : Bool
}
type alias Output =
{ email : EmailAddress
, password : String
, rememberMe : Bool
}
form : Form Values Output
form =
let
emailField =
Form.emailField
{ parser = EmailAddress.parse
, value = .email
, update = \value values -> { values | email = value }
, error = always Nothing
, attributes =
{ label = "E-Mail"
, placeholder = "[email protected]"
}
}
passwordField =
Form.passwordField
{ parser = Ok
, value = .password
, update = \value values -> { values | password = value }
, error = always Nothing
, attributes =
{ label = "Password"
, placeholder = "Your password"
}
}
rememberMeCheckbox =
Form.checkboxField
{ parser = Ok
, value = .rememberMe
, update = \value values -> { values | rememberMe = value }
, error = always Nothing
, attributes =
{ label = "Remember me" }
}
in
Form.succeed Output
|> Form.append emailField
|> Form.append passwordField
|> Form.append rememberMeCheckbox
Read the Form
module documentation to understand how this code works.
Demo / Examples
Try out the live demo and/or check out the examples.
Also, feel free to play with the package using this Ellie snippet.
Contributing / Feedback
Feel free to fork and open issues or pull requests. You can also come to chat in the #forms channel on the Elm Slack, feel free to contact me (@hecrj) there!
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].