We are assuming that you already have an Elmish application set up with Bulma
If needed, you can use Fulma minimal template as a starting point
Later, it will be explained how you can customise the view to fit your application style.
Fieldset / Groups
Wraps a list of fields inside of a group with a label on top.
Showcase
Code
<!-- Wrap your field in a fieldset with the class 'fieldset' -->
+Fable.Form · Fieldset / Groups Fieldset / Groups
Wraps a list of fields inside of a group with a label on top.
Showcase
Code
<!-- Wrap your field in a fieldset with the class 'fieldset' -->
<fieldset class="fieldset">
<!-- Use the the legend element to control what text to show at the top of the group -->
<legend>Teacher</legend>
diff --git a/Fable.Form.Simple.Bulma/components/form-list.html b/Fable.Form.Simple.Bulma/components/form-list.html
index aaa3836..7ff3978 100644
--- a/Fable.Form.Simple.Bulma/components/form-list.html
+++ b/Fable.Form.Simple.Bulma/components/form-list.html
@@ -1,4 +1,4 @@
-Fable.Form · Form list Form list
Wraps a list of fields inside of a box.
Showcase
Code
<!-- Wrap your fields in a div with the class 'form-list' -->
<div class="form-list">
diff --git a/Fable.Form.Simple.Bulma/installation.html b/Fable.Form.Simple.Bulma/installation.html
index b02c5ad..48b1d18 100644
--- a/Fable.Form.Simple.Bulma/installation.html
+++ b/Fable.Form.Simple.Bulma/installation.html
@@ -1,4 +1,4 @@
-Fable.Form · Installation Installation
Fable.Form.Simple offers custom fields that are not supported by default by Bulma.
In order, to support them, Fable.Form.Simple.Bulma comes with an npm package fable-form-simple-bulma that you need to install.
Add the NuGet package to your project
# .NET CLI
+Fable.Form · Installation Installation
Fable.Form.Simple offers custom fields that are not supported by default by Bulma.
In order, to support them, Fable.Form.Simple.Bulma comes with an npm package fable-form-simple-bulma that you need to install.
Add the NuGet package to your project
# .NET CLI
dotnet add yourProject.fsproj package Fable.Form.Simple.Bulma
# Paket CLI
diff --git a/Fable.Form.Simple/customisation.html b/Fable.Form.Simple/customisation.html
index 3de25e4..d8267dc 100644
--- a/Fable.Form.Simple/customisation.html
+++ b/Fable.Form.Simple/customisation.html
@@ -1,4 +1,4 @@
-Fable.Form · Custom view templates Custom view templates
Fable.Form.Simple allows you to adapt the view code to make your form match your application looks.
If you are using Bulma in your application you should use Fable.Form.Simple.Bulma.
However, if you need to customize the view code, you should start from this file structure:
// Have the name of your implementation as a suffix of Fable.Form.Simple
+Fable.Form · Custom view templates Custom view templates
Fable.Form.Simple allows you to adapt the view code to make your form match your application looks.
If you are using Bulma in your application you should use Fable.Form.Simple.Bulma.
However, if you need to customize the view code, you should start from this file structure:
// Have the name of your implementation as a suffix of Fable.Form.Simple
namespace Fable.Form.Simple.MyImplementation
// Force the user to use qualified access from here
diff --git a/Fable.Form.Simple/features.html b/Fable.Form.Simple/features.html
index bdc7fd7..0077d06 100644
--- a/Fable.Form.Simple/features.html
+++ b/Fable.Form.Simple/features.html
@@ -1 +1 @@
-Fable.Form · Features Features
Here is a list of all the fields supported by Fable.Form.Simple:
Standard HTML fields
- Text input
- Password
- Email
- Raw
- Textarea
- Radio button
- Checkbox
- Select
Custom fields
Group
Wraps a form in a group.
It can result in rendering the fields differently. For example, Fable.Form.Simple.Feliz renders groups of field horizontally
See sign-up example
Section
Wraps a form in a section an area with a title.
See dynamic example
List of form
Build a variable list of forms, which support adding and removing form.
See form list
Custom action
Fable.Form.Simple supports to type of Action:
SubmitOnly of string: which generates a submit button with the provided label
Custom of (State -> Elmish.Dispatch<'Msg> -> ReactElement): which allows you full control over the action area.
This makes it possible for you to add a submit button and a cancel button for example.
You can also use this feature to customize the look of the action area if the default is not good for you.
When using, the custom option make sure to have a button of type <button type="submit"></button> so the form can capture the submit event.
See Custom actions example for a demo.
Fable.Form · Features Features
Here is a list of all the fields supported by Fable.Form.Simple:
Standard HTML fields
- Text input
- Password
- Email
- Raw
- Textarea
- Radio button
- Checkbox
- Select
Custom fields
Group
Wraps a form in a group.
It can result in rendering the fields differently. For example, Fable.Form.Simple.Feliz renders groups of field horizontally
See sign-up example
Section
Wraps a form in a section an area with a title.
See dynamic example
List of form
Build a variable list of forms, which support adding and removing form.
See form list
Custom action
Fable.Form.Simple supports to type of Action:
SubmitOnly of string: which generates a submit button with the provided label
Custom of (State -> Elmish.Dispatch<'Msg> -> ReactElement): which allows you full control over the action area.
This makes it possible for you to add a submit button and a cancel button for example.
You can also use this feature to customize the look of the action area if the default is not good for you.
When using, the custom option make sure to have a button of type <button type="submit"></button> so the form can capture the submit event.
See Custom actions example for a demo.
Fable.Form · How to use ? How to use ?
In this section, we are going to focus on the easiest way to use Fable.Form.
We are going to create a login form similar to this one
Add Fable.Form.Simple.Bulma to your project
# .NET CLI
+Fable.Form · How to use ? How to use ?
In this section, we are going to focus on the easiest way to use Fable.Form.
We are going to create a login form similar to this oneWe are assuming that you already have an Elmish application set up with Bulma
If needed, you can use Fulma minimal template as a starting point
Later, it will be explained how you can customise the view to fit your application style.
Add Fable.Form.Simple.Bulma to your project
# .NET CLI
dotnet add yourProject.fsproj package Fable.Form.Simple.Bulma
# Paket CLI
-paket add Fable.Form.Simple
Open the library modules
open Fable.Form.Simple
+paket add Fable.Form.Simple.Bulma
Open the library modules
open Fable.Form.Simple
open Fable.Form.Simple.Bulma
Define a type Values which is used to represents the different fields we have in the form.
type Values =
{
Email : string
diff --git a/Fable.Form/use_what_you_need.html b/Fable.Form/use_what_you_need.html
index a95198f..85cd807 100644
--- a/Fable.Form/use_what_you_need.html
+++ b/Fable.Form/use_what_you_need.html
@@ -1 +1 @@
-Fable.Form · Use what you need Use what you need
Fable.Form has been designed with modularity/customisation in mind.
It consist of 3 layers:
A core library defining the Base types and functions needed to represents / manipulate a form.
This correspond to Fable.Form
A logic library, which implements how a form is represented, what fields are supported.
This correspond to Fable.Form.Simple
A view library, whichs implements how a form should be rendered.
This correspond to Fable.Form.Simple.Bulma
Only Fable.Form is mandatory, see below how to choose what you should use depending on your needs.
What should I use?
Click here to see the list of supported field by Fable.Form.Simple
Fable.Form · Use what you need Use what you need
Fable.Form has been designed with modularity/customisation in mind.
It consist of 3 layers:
A core library defining the Base types and functions needed to represents / manipulate a form.
This correspond to Fable.Form
A logic library, which implements how a form is represented, what fields are supported.
This correspond to Fable.Form.Simple
A view library, whichs implements how a form should be rendered.
This correspond to Fable.Form.Simple.Bulma
Only Fable.Form is mandatory, see below how to choose what you should use depending on your needs.
What should I use?
Click here to see the list of supported field by Fable.Form.Simple
Fable.Form · Fable.Form.Simple.Bulma Fable.Form.Simple.Bulma
- 4.0.0Jun 2022
- Changed
Upgrade to Fable 4 and Feliz 2
- 3.0.0Mar 2022
- Added
Fix #24: Allows to customise the actions of the form.
- 2.0.0Oct 2021
- Added
Add support for more field type:
ColorDateDateTimeLocalEmailNumberSearchTelTime
Allow to pass any attributes to an input field using the new HtmlAttributes property
- 1.1.0Jun 2021
- Changed
Lower FSharp.Core requirement
- 1.0.1May 2021
- Fixed
Publish the *.fsi fiels inside fable folder
- 1.0.0May 2021
- Added
Initial release
Fable.Form · Fable.Form.Simple.Bulma Fable.Form.Simple.Bulma
- 4.0.0Jun 2022
- Changed
Upgrade to Fable 4 and Feliz 2
- 3.0.0Mar 2022
- Added
Fix #24: Allows to customise the actions of the form.
- 2.0.0Oct 2021
- Added
Add support for more field type:
ColorDateDateTimeLocalEmailNumberSearchTelTime
Allow to pass any attributes to an input field using the new HtmlAttributes property
- 1.1.0Jun 2021
- Changed
Lower FSharp.Core requirement
- 1.0.1May 2021
- Fixed
Publish the *.fsi fiels inside fable folder
- 1.0.0May 2021
- Added
Initial release
Fable.Form · Fable.Form.Simple Fable.Form.Simple
- 4.0.0Jun 2022
- Changed
Upgrade to Fable 4 and Feliz 2
- 3.1.0Jul 2022
- Fixed
Fix #32: Add Form.disable
- 3.0.0Mar 2022
- Changed
Fix #24: Allows to customise the actions of the form.
Here is how to migrate your old code:
{
+Fable.Form · Fable.Form.Simple Fable.Form.Simple
- 4.0.0Jun 2022
- Changed
Upgrade to Fable 4 and Feliz 2
- 3.1.0Jul 2022
- Fixed
Fix #32: Add Form.disable
- 3.0.0Mar 2022
- Changed
Fix #24: Allows to customise the actions of the form.
Here is how to migrate your old code:
{
Dispatch = dispatch
OnChange = FormChanged
- Action = "Sign in"
diff --git a/changelogs/Fable.Form.html b/changelogs/Fable.Form.html
index 0294ba5..b5625c6 100644
--- a/changelogs/Fable.Form.html
+++ b/changelogs/Fable.Form.html
@@ -1 +1 @@
-Fable.Form · Fable.Form
\ No newline at end of file
+Fable.Form · Fable.Form
\ No newline at end of file
diff --git a/changelogs/fable-form-simple-bulma.html b/changelogs/fable-form-simple-bulma.html
index b4f05dd..2f1a1f6 100644
--- a/changelogs/fable-form-simple-bulma.html
+++ b/changelogs/fable-form-simple-bulma.html
@@ -1 +1 @@
-Fable.Form · fable-form-simple-bulma fable-form-simple-bulma
- 1.0.0May 2021
- Added
Initial release
Fable.Form · fable-form-simple-bulma fable-form-simple-bulma
- 1.0.0May 2021
- Added
Initial release
Fable.Form
\ No newline at end of file
+Fable.Form
\ No newline at end of file
diff --git a/index.html b/index.html
index fc7344a..274281e 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-Fable.Form · Introduction Fable.Form allows you to build forms that are:
- Composable: they can be extended and embedded into other forms
- Type safe: makes the most of F# compiler to tie everything together
- Scalable: you don't need a
Msg for each field neither repeat your view code - Terse: your field logic is defined in a single place
- Modular: you can create your own fields and customize how existing fields are rendered
let form : Form.Form<Values, Msg, _> =
+Fable.Form · Introduction Fable.Form allows you to build forms that are:
- Composable: they can be extended and embedded into other forms
- Type safe: makes the most of F# compiler to tie everything together
- Scalable: you don't need a
Msg for each field neither repeat your view code - Terse: your field logic is defined in a single place
- Modular: you can create your own fields and customize how existing fields are rendered
let form : Form.Form<Values, Msg, _> =
let emailField =
Form.textField
{
diff --git a/sponsors.html b/sponsors.html
index 0130130..7abe094 100644
--- a/sponsors.html
+++ b/sponsors.html
@@ -1 +1 @@
-Fable.Form · Sponsors & Backers Sponsors & Backers
The development of this project is made possible thanks to the support of these awesome sponsors & backers.
Become a backer or sponsor on Patreon
If you prefer one time donation, you can do it via Paypal
Fable.Form · Sponsors & Backers Sponsors & Backers
The development of this project is made possible thanks to the support of these awesome sponsors & backers.
Become a backer or sponsor on Patreon
If you prefer one time donation, you can do it via Paypal