+ @b4.form(routes.Application.docs) { + +

+ Documentation @versionBadge(explicit = true) +

+

This page explains each component in more details.

+ + +

Field Constructors

+

Vertical forms

+

Horizontal forms

+

Inline forms

+

Clear field constructor

+

Specific field constructors

+ +

Arguments (args)

+ @bsExampleWithCode { + @b4.text( fooForm("foo"), Symbol("_label") -> "Constraints", Symbol("_showConstraints") -> true, Symbol("placeholder") -> "A simple text showing its constraints..." ) + }{ + @@b4.text( fooForm("foo"), Symbol("_label") -> "Constraints", Symbol("_showConstraints") -> true, Symbol("placeholder") -> "A simple text showing its constraints..." ) + } + +

Special arguments (the underscored ones)

+ +

Validation arguments

+ @bsExampleWithCode { +
+ @b4.text( validationForm("username"), Symbol("_label") -> "Username", Symbol("_help") -> "A username between 1 and 20 characters" ) + @b4.email( validationForm("email"), Symbol("_label") -> "Email" ) + @b4.number( validationForm("age"), Symbol("_label") -> "Age", Symbol("_help") -> "From 18 to 99 years old" ) + @b4.text( validationForm("color"), Symbol("_label") -> "Hexadecimal color", Symbol("_help") -> "Format is #CCC or #CCCCCC" ) +
+ }{ + @@b4.text( validationForm("username"), Symbol("_label") -> "Username", Symbol("_help") -> "A username between 1 and 20 characters" ) + @@b4.email( validationForm("email"), Symbol("_label") -> "Email" ) + @@b4.number( validationForm("age"), Symbol("_label") -> "Age", Symbol("_help") -> "From 18 to 99 years old" ) + @@b4.text( validationForm("color"), Symbol("_label") -> "Hexadecimal color", Symbol("_help") -> "Format is #CCC or #CCCCCC" ) + } + +

Optional arguments

+

Boolean arguments

+

Arguments with dashes (e.g. data-* attributes)

+ + +

ARIA attributes

+ + +

Forms @@(action: Call, args: (Symbol, Any)*)(body: => Html)(implicit fc: BSFieldConstructor)

+

Forms with a specific BSFieldConstructor

+

Forms with CSRF token

+ + +

Input helpers

+ +

About disabled and readonly attributes

+

Validation states & feedback tooltips

+ @bsExampleWithCode { + @b4.text( fooForm("foo"), Symbol("_label") -> "Success", Symbol("_success") -> "Great!", Symbol("_help") -> "A help text", Symbol("placeholder") -> "Success text..." ) + @b4.text( fooForm("foo"), Symbol("_label") -> "Warning", Symbol("_warning") -> "Be carefull with this...", Symbol("_help") -> "A help text", Symbol("placeholder") -> "Warning text..." ) + @b4.text( fooForm("foo"), Symbol("_label") -> "Error", Symbol("_error") -> "An error occurred!", Symbol("_help") -> "A help text", Symbol("placeholder") -> "Error text..." ) + }{ + @@b4.text( fooForm("foo"), Symbol("_label") -> "Success", Symbol("_success") -> "Great!", Symbol("_help") -> "A help text", Symbol("placeholder") -> "Success text..." ) + @@b4.text( fooForm("foo"), Symbol("_label") -> "Warning", Symbol("_warning") -> "Be carefull with this...", Symbol("_help") -> "A help text", Symbol("placeholder") -> "Warning text..." ) + @@b4.text( fooForm("foo"), Symbol("_label") -> "Error", Symbol("_error") -> "An error occurred!", Symbol("_help") -> "A help text", Symbol("placeholder") -> "Error text..." ) + } + @bsExampleWithCode { + @b4.vertical.form(routes.Application.vertical, Symbol("_feedbackTooltip") -> true) { implicit vfc => + @b4.text( fooForm("foo"), Symbol("_label") -> "Success", Symbol("_success") -> "Great!", Symbol("_help") -> "A help text", Symbol("placeholder") -> "Success text...", Symbol("_class") -> "position-relative" ) + @b4.text( fooForm("foo"), Symbol("_label") -> "Warning", Symbol("_warning") -> "Be carefull with this...", Symbol("_help") -> "A help text", Symbol("placeholder") -> "Warning text...", Symbol("_class") -> "position-relative" ) + @b4.text( fooForm("foo"), Symbol("_label") -> "Error", Symbol("_error") -> "An error occurred!", Symbol("_help") -> "A help text", Symbol("placeholder") -> "Error text...", Symbol("_class") -> "position-relative" ) + } + }{ + @@b4.vertical.form(routes.Application.vertical, Symbol("_feedbackTooltip") -> true) { implicit vfc => + @@b4.text( fooForm("foo"), Symbol("_label") -> "Success", Symbol("_success") -> "Great!", Symbol("_help") -> "A help text", Symbol("placeholder") -> "Success text...", Symbol("_class") -> "position-relative" ) + @@b4.text( fooForm("foo"), Symbol("_label") -> "Warning", Symbol("_warning") -> "Be carefull with this...", Symbol("_help") -> "A help text", Symbol("placeholder") -> "Warning text...", Symbol("_class") -> "position-relative" ) + @@b4.text( fooForm("foo"), Symbol("_label") -> "Error", Symbol("_error") -> "An error occurred!", Symbol("_help") -> "A help text", Symbol("placeholder") -> "Error text...", Symbol("_class") -> "position-relative" ) + } + } + + + +

b4.inputType @@(inputType: String, field: Field, args: (Symbol,Any)*)(implicit handler: BSFieldConstructor, @BSVersion.msgsArg)

+

+ It renders a simple input with a specific type attribute and it adds class="form-control" by default, but you can add an extra class with Symbol("class") -> "extra_class". +

+ @bsExampleWithCode { + @b4.inputType( "text", fooForm("name"), Symbol("class") -> "extra_class", Symbol("_label") -> "Name", Symbol("placeholder") -> "John Doe" ) + @b4.inputType( "email", fooForm("email"), Symbol("_label") -> "Email", Symbol("placeholder") -> "example@mail.com" ) + @b4.inputType( "password", fooForm("password"), Symbol("_label") -> "Password", Symbol("_help") -> "With at least 8 characters" ) + }{ + @@b4.inputType( "text", fooForm("name"), Symbol("class") -> "extra_class", Symbol("_label") -> "Name", Symbol("placeholder") -> "John Doe" ) + @@b4.inputType( "email", fooForm("email"), Symbol("_label") -> "Email", Symbol("placeholder") -> "example@@mail.com" ) + @@b4.inputType( "password", fooForm("password"), Symbol("_label") -> "Password", Symbol("_help") -> "With at least 8 characters" ) + } + + +

b4.text @@(field: Field, args: (Symbol,Any)*)(implicit handler: BSFieldConstructor, @BSVersion.msgsArg)

+

+ It is a short version of b4.inputType for type="text". +

+ @bsExampleWithCode { + @b4.text( fooForm("name"), Symbol("_label") -> "Name", Symbol("placeholder") -> "John Doe" ) + }{ + @@b4.text( fooForm("name"), Symbol("_label") -> "Name", Symbol("placeholder") -> "John Doe" ) + } + + +

b4.password @@(field: Field, args: (Symbol,Any)*)(implicit handler: BSFieldConstructor, @BSVersion.msgsArg)

+

+ It is a short version of b4.inputType for type="password". +

+

+ For security reasons, this helper doesn't display the possible value the field could have (for example when the form is reloaded after a validation failure). +

+ @bsExampleWithCode { + @b4.password( fooForm("password"), Symbol("_label") -> "Password", Symbol("_help") -> "With at least 8 characters" ) + }{ + @@b4.password( fooForm("password"), Symbol("_label") -> "Password", Symbol("_help") -> "With at least 8 characters" ) + } + + +

b4.file @@(field: Field, args: (Symbol,Any)*)(implicit handler: BSFieldConstructor, @BSVersion.msgsArg)

+

+ It is a short version of b4.inputType for type="file". +

+ @bsExampleWithCode { + @b4.file( fooForm("file"), Symbol("_label") -> "File" ) + @b4.file( fooForm("file"), Symbol("_label") -> "File", Symbol("class") -> "form-control" ) + }{ + @@b4.file( fooForm("file"), Symbol("_label") -> "File" ) + @@b4.file( fooForm("file"), Symbol("_label") -> "File", Symbol("class") -> "form-control" ) + } +
Bootstrap 4 custom file
+

+ For new Bootstrap 4 custom file, you only need to add Symbol("_custom") -> true. + Additionally, you can use the argument 'placeholder. +

+ @bsExampleWithCode { + @b4.file( fooForm("file_custom"), Symbol("_label") -> "File", Symbol("_custom") -> true, Symbol("placeholder") -> "Select a file" ) + }{ + @@b4.file( fooForm("file"), Symbol("_label") -> "File", Symbol("_custom") -> true, Symbol("placeholder") -> "Select a file" ) + } + + +

b4.textarea @@(field: Field, args: (Symbol,Any)*)(implicit handler: BSFieldConstructor, @BSVersion.msgsArg)

+

+ It renders a textarea and it adds class="form-control" by default. +

+ @bsExampleWithCode { + @b4.textarea( fooForm("foo"), Symbol("_label") -> "Textarea", Symbol("rows") -> 3 ) + }{ + @@b4.textarea( fooForm("foo"), Symbol("_label") -> "Textarea", Symbol("rows") -> 3 ) + } + + +

b4.checkbox @@(field: Field, args: (Symbol,Any)*)(implicit handler: BSFieldConstructor, @BSVersion.msgsArg)

+

+ It renders a checkbox. It has the attribute value set to true by default, + but you can use another one using the 'value argument. +

+

+ The special '_text argument lets you put a text after the checkbox. +

+

+ Regarding to the checked attribute, if you want to set it to true as default, use Symbol("_default") -> true. + And if you need to force its value use directly the 'checked argument. +

+

+ It supports readonly attribute adding an additional disabled one and a + <input type="hidden">. +

+ @bsExampleWithCode { + @b4.checkbox( fooForm("foo"), Symbol("_text") -> "Remember me" ) + }{ + @@b4.checkbox( fooForm("foo"), Symbol("_text") -> "Remember me" ) + + // uses "bar" as value for the checkbox + @@b4.checkbox( fooForm("foo"), Symbol("_text") -> "Remember me", Symbol("value") -> "bar" ) + + // checked by default (if the form is filled, this value will be taken) + @@b4.checkbox( fooForm("foo"), Symbol("_text") -> "Remember me", Symbol("_default") -> true ) + + // always checked (even if the form has been filled with a false) + @@b4.checkbox( fooForm("foo"), Symbol("_text") -> "Remember me", Symbol("checked") -> true ) + + // disabled -> it will NOT be sent within the POST request + @@b4.checkbox( fooForm("foo"), Symbol("_text") -> "Remember me", Symbol("disabled") -> true ) + + // readonly -> it will be sent within the POST request + @@b4.checkbox( fooForm("foo"), Symbol("_text") -> "Remember me", Symbol("readonly") -> true ) + } +

+ Note you can use any value for the _text argument. +

+ @bsExampleWithCode { + @b4.checkbox( fooForm("foo"), Symbol("_text") -> Html("""Do you want a beer? """) ) + }{ + @@b4.checkbox( fooForm("foo"), Symbol("_text") -> Html("Do you want a beer? ") ) + } +
Bootstrap 4 custom checkbox
+

+ For new Bootstrap 4 custom checkbox, you only need to add Symbol("_custom") -> true. +

+ @bsExampleWithCode { + @b4.checkbox( fooForm("foo_checkbox_custom"), Symbol("_custom") -> true, Symbol("_text") -> Html("""Do you want a beer? """) ) + }{ + @@b4.checkbox( fooForm("foo"), Symbol("_custom") -> true, Symbol("_text") -> Html("Do you want a beer? ") ) + } + + +

b4.radio @@(field: Field, options: Seq[(String, Any)], args: (Symbol, Any)*)(implicit handler: BSFieldConstructor, @BSVersion.msgsArg)

+

+ It renders a radio. It supports readonly attribute adding an additional disabled + one and a <input type="hidden">. +

+

+ It has an additional special _inline argument to make it an inline radio (for vertical and horizontal forms). +

+ @bsExampleWithCode { + @b4.radio( fooForm("foo_radio1"), options = Seq("M"->"Male","F"->"Female"), Symbol("_label") -> "Radio Group" ) + }{ + @@opts = @@{ Seq("M"->"Male","F"->"Female") } + + @@b4.radio( fooForm("foo"), options = opts, Symbol("_label") -> "Radio Group" ) + + // an inline radio within a vertical or horizontal form + @@b4.radio( fooForm("foo"), options = opts, Symbol("_label") -> "Radio Group", Symbol("_inline") -> true ) + + // with value "F" by default (if the form is filled, this value will be taken) + @@b4.radio( fooForm("foo"), options = opts, Symbol("_label") -> "Radio Group", Symbol("value") -> "F" ) + + // disabled -> it will NOT be sent within the POST request + @@b4.radio( fooForm("foo"), options = opts, Symbol("_label") -> "Radio Group", Symbol("disabled") -> true ) + + // readonly -> it will be sent within the POST request + @@b4.radio( fooForm("foo"), options = opts, Symbol("_label") -> "Radio Group", Symbol("readonly") -> true ) + } +

+ Note you can use any value for the options argument. +

+ @bsExampleWithCode { + @b4.radio( fooForm("foo_radio2"), options = Seq("B" -> Html("""Beer """), "C" -> Html("""Coffee """)), Symbol("_label") -> "What do you prefer?" ) + }{ + @@b4.radio( fooForm("foo"), options = Seq("B" -> Html("Beer "), "C" -> Html("Coffee ")), Symbol("_label") -> "What do you prefer?" ) + } +
Bootstrap 4 custom radio
+

+ For new Bootstrap 4 custom radio, you only need to add Symbol("_custom") -> true. +

+ @bsExampleWithCode { + @b4.radio( fooForm("foo_radio_custom"), options = Seq("B" -> Html("""Beer """), "C" -> Html("""Coffee """)), Symbol("_custom") -> true, Symbol("_label") -> "What do you prefer?" ) + }{ + @@b4.radio( fooForm("foo"), options = Seq("B" -> Html("""Beer """), "C" -> Html("""Coffee """)), Symbol("_custom") -> true, Symbol("_label") -> "What do you prefer?" ) + } + +
b4.radio @@(field: Field, args: (Symbol, Any)*)(content: Tuple6[Boolean, Boolean, String, String, Option[String], Map[Symbol, Any]] => Html)(implicit handler: BSFieldConstructor, @BSVersion.msgsArg)
+
b4.radioOption @@(inputValue: Any, label: Any, args: (Symbol, Any)*)(implicit extraInfo: (Boolean, Boolean, String, String, Option[String], Map[Symbol,Any]))
+

+ If you need more versatility you can fully customize your radio options: +

+ @bsExampleWithCode { + @b4.radio( fooForm("foo_radio3"), Symbol("_label") -> "Ok, now that we're alone, what do you really prefer?" ) { implicit extraInfo => + @b4.radioOption("B", Html("""Beer """)) + @b4.radioOption("B", Html("""Coffee """), Symbol("disabled") -> true) + } + }{ + @@b4.radio( fooForm("foo3"), Symbol("_label") -> "Ok, now that we're alone, what do you really prefer?" ) { implicit extraInfo => + @@b4.radioOption("B", Html("Beer ")) + @@b4.radioOption("B", Html("Coffee "), Symbol("disabled") -> true) + } + } + + + + +

b4.select @@(field: Field, options: Seq[(String,String)], args: (Symbol,Any)*)(implicit handler: BSFieldConstructor, @BSVersion.msgsArg)

+

+ It renders a select. It supports readonly attribute adding an additional disabled + one and a <input type="hidden">. +

+ @bsExampleWithCode { + @b4.select( fooForm("foo"), options = fruits, Symbol("_label") -> "Select" ) + @b4.select( fooForm("foo"), options = fruits, Symbol("_label") -> "Disabled", Symbol("disabled") -> true ) + @b4.select( fooForm("foo"), options = fruits, Symbol("_label") -> "Readonly", Symbol("readonly") -> true ) + }{ + @@fruits = @@{ Seq("A"->"Apples","P"->"Pears","B"->"Bananas") } + + @@b4.select( fooForm("foo"), options = fruits, Symbol("_label") -> "Select" ) + + // disabled -> it will NOT be sent within the POST request + @@b4.select( fooForm("foo"), options = fruits, Symbol("_label") -> "Select", Symbol("disabled") -> true ) + + // readonly -> it will be sent within the POST request + @@b4.select( fooForm("foo"), options = fruits, Symbol("_label") -> "Select", Symbol("readonly") -> true ) + } +

+ You can add a default first value using the argument '_default with a string. + It will add a first option to the select with an empty string value. So you could add a + required constraint to the field to force the user to select one + other option. In addition, this default option is always disable to avoid the user to select it, + and if any other option is selected this default one will not appear at all. +

+ @bsExampleWithCode { + @b4.select( fooForm("foo"), options = fruits, Symbol("_label") -> "With default", Symbol("_default") -> "Select an option" ) + @b4.select( fooForm("foo"), options = fruits, Symbol("_label") -> "With default and Pears as value", Symbol("_default") -> "Select an option", Symbol("value") -> "P" ) + }{ + @@b4.select( fooForm("foo"), options = fruits, Symbol("_label") -> "Select", Symbol("_default") -> "Select an option" ) + @@b4.select( fooForm("foo"), options = fruits, Symbol("_label") -> "With default and Pears as value", Symbol("_default") -> "Select an option", Symbol("value") -> "P" ) + } + +

+ For a multiple select you only need to add the 'multiple argument. + In that case, the '_default argument will be ignored. +

+ @bsExampleWithCode { + @b4.select( fooForm("foo"), options = fruits, Symbol("_label") -> "Select Multiple", Symbol("multiple") -> true ) + }{ + @@fruits = @@{ Seq("A"->"Apples","P"->"Pears","B"->"Bananas") } + + @@b4.select( fooForm("foo"), options = fruits, Symbol("_label") -> "Fruits", Symbol("multiple") -> true ) + + // with value "A" and "B" by default + // it is a string with every value separated by commas + @@b4.select( fooForm("foo"), options = fruits, Symbol("_label") -> "Fruits", Symbol("multiple") -> true, Symbol("value") -> "A,B" ) + } +
Bootstrap 4 custom select
+

+ For new Bootstrap 4 custom select, you only need to add Symbol("_custom") -> true. +

+ @bsExampleWithCode { + @b4.select( fooForm("foo_select_custom"), options = fruits, Symbol("_custom") -> true, Symbol("_label") -> "Custom Select" ) + }{ + @@b4.select( fooForm("foo"), options = fruits, Symbol("_custom") -> true, Symbol("_label") -> "Custom Select" ) + } + +
b4.select @@(field: Field, args: (Symbol,Any)*)(content: Set[String] => Html)(implicit handler: BSFieldConstructor, @BSVersion.msgsArg)
+
b4.selectOption @@(value: Any, name: Any, args: (Symbol, Any)*)(implicit values: Set[String])
+

+ If you need more versatility you can fully customize your select options: +

+ @bsExampleWithCode { + @b4.select( fooForm("foo"), Symbol("_label") -> "Grouped select" ) { implicit values => + + @b4.selectOption("opt_1-1", "Option 1.1") + @b4.selectOption("opt_1-2", "Option 1.2", Symbol("disabled") -> true) + @b4.selectOption("opt_1-3", "Option 1.3") + + + @b4.selectOption("opt_2-1", "Option 2.1", Symbol("disabled") -> true) + @b4.selectOption("opt_2-2", "Option 2.2") + + } + + @b4.select( fooForm("foo"), Symbol("_label") -> "Fruits select (lemon preselected)" ) { implicit values => + + @fruitsWithCitrus.filter(_.isCitrus).map { citrus => + @b4.selectOption(citrus.id, citrus.name, Symbol("selected") -> (citrus.name == "Lemon")) + } + + + @fruitsWithCitrus.filterNot(_.isCitrus).map { fruit => + @b4.selectOption(fruit.id, fruit.name) + } + + } + }{ + @@b4.select( fooForm("foo"), Symbol("_label") -> "Grouped select" ) { implicit values => + + @@b4.selectOption("opt_1-1", "Option 1.1") + @@b4.selectOption("opt_1-2", "Option 1.2", Symbol("disabled") -> true) + @@b4.selectOption("opt_1-3", "Option 1.3") + + + @@b4.selectOption("opt_2-1", "Option 2.1", Symbol("disabled") -> true) + @@b4.selectOption("opt_2-2", "Option 2.2") + + } + + class Fruit (id: Long, name: String, isCitrus: Boolean) + + @@fruitsWithCitrus = @@{ Seq( + Fruit(1L, "Apple", false), + Fruit(2L, "Orange", true), + Fruit(3L, "Pear", false), + Fruit(4L, "Lemon", true), + Fruit(5L, "Banana", false) + )} + + @@b4.select( fooForm("foo"), Symbol("_label") -> "Fruits select (lemon preselected)" ) { implicit values => + + @@fruitsWithCitrus.filter(_.isCitrus).map { citrus => + @@b4.selectOption(citrus.id, citrus.name, Symbol("selected") -> (citrus.name == "Lemon")) + } + + + @@fruitsWithCitrus.filterNot(_.isCitrus).map { fruit => + @@b4.selectOption(fruit.id, fruit.name) + } + + } + } + + +

b4.hidden @@(name: String, value: Any, args: (Symbol, Any)*)

+

+ It simply renders a hidden input. +

+ @code { + @@b4.hidden("fooName", "fooValue", Symbol("fooAttr") -> "fooAttrValue") + } +

Renders to:

+ @code { + + } +
b4.hidden @@(field: Field, args: (Symbol, Any)*)
+

+ You can also render a hidden input directly with a Field as you could do with a b4.text helper, for example. + It lets you be able to simply change a b4.text for a b4.hidden to hide it. +

+

+ It will automatically take the name of the Field and it's value if present. You can set a default value using the argument + 'value. Finally, take into account that every "underscored" argument (with "_" as preffix) will be removed. +

+ @code { + @@b4.hidden( fooForm("name"), Symbol("_label") -> "Name", Symbol("value") -> "defaultValue", Symbol("placeholder") -> "John Doe" ) + } +

Renders to:

+ @code { + + } + +

b4.hiddens @@(namesAndValues: (Any, Any)*)

+

+ Render a list of hidden inputs. +

+ @code { + @@b4.hiddens("fooId" -> 1L, "barId" -> 2L) + } +

Renders to:

+ @code { + + + } + + + + +

New HTML5 helpers

+

+ Important note: the new HTML5 input types are not fully supported for web browsers. Those not supported by old web browsers, will behave as input type text. +

+ +

b4.color @@(field: Field, args: (Symbol,Any)*)(implicit handler: BSFieldConstructor, @BSVersion.msgsArg)

+

+ It is a short version of b4.inputType for type="color". +

+ @bsExampleWithCode { + @b4.color( fooForm("color"), Symbol("_label") -> "Color", Symbol("value") -> "#3264c8" ) + }{ + @@b4.color( fooForm("color"), Symbol("_label") -> "Color", Symbol("value") -> "#3264c8" ) + } + +

b4.date @@(field: Field, args: (Symbol,Any)*)(implicit handler: BSFieldConstructor, @BSVersion.msgsArg)

+

+ It is a short version of b4.inputType for type="date". +

+ @bsExampleWithCode { + @b4.date( fooForm("date"), Symbol("_label") -> "Date" ) + }{ + @@b4.date( fooForm("date"), Symbol("_label") -> "Date" ) + } + +

b4.datetime @@(field: Field, args: (Symbol,Any)*)(implicit handler: BSFieldConstructor, @BSVersion.msgsArg)

+

+ It is a short version of b4.inputType for type="datetime". +

+ @bsExampleWithCode { + @b4.datetime( fooForm("datetime"), Symbol("_label") -> "Datetime" ) + }{ + @@b4.datetime( fooForm("datetime"), Symbol("_label") -> "Datetime" ) + } + +

b4.datetimeLocal @@(field: Field, args: (Symbol,Any)*)(implicit handler: BSFieldConstructor, @BSVersion.msgsArg)

+

+ It is a short version of b4.inputType for type="datetime-local". +

+ @bsExampleWithCode { + @b4.datetimeLocal( fooForm("datetimeLocal"), Symbol("_label") -> "Datetime-Local" ) + }{ + @@b4.datetimeLocal( fooForm("datetimeLocal"), Symbol("_label") -> "Datetime-Local" ) + } + +

b4.email @@(field: Field, args: (Symbol,Any)*)(implicit handler: BSFieldConstructor, @BSVersion.msgsArg)

+

+ It is a short version of b4.inputType for type="email". +

+ @bsExampleWithCode { + @b4.email( fooForm("email"), Symbol("_label") -> "Email", Symbol("placeholder") -> "example@mail.com", Symbol("required") -> true ) + }{ + @@b4.email( fooForm("email"), Symbol("_label") -> "Email", Symbol("placeholder") -> "example@@mail.com" ) + } + +

b4.month @@(field: Field, args: (Symbol,Any)*)(implicit handler: BSFieldConstructor, @BSVersion.msgsArg)

+

+ It is a short version of b4.inputType for type="month". +

+ @bsExampleWithCode { + @b4.month( fooForm("month"), Symbol("_label") -> "Month" ) + }{ + @@b4.month( fooForm("month"), Symbol("_label") -> "Month" ) + } + +

b4.number @@(field: Field, args: (Symbol,Any)*)(implicit handler: BSFieldConstructor, @BSVersion.msgsArg)

+

+ It is a short version of b4.inputType for type="number". +

+ @bsExampleWithCode { + @b4.number( fooForm("number"), Symbol("_label") -> "Number (0 to 50 with intervals of 5)", Symbol("min") -> 0, Symbol("max") -> 50, Symbol("step") -> 5 ) + }{ + @@b4.number( fooForm("number"), Symbol("_label") -> "Number", Symbol("min") -> 0, Symbol("max") -> 50, Symbol("step") -> 5 ) + } + +

b4.range @@(field: Field, args: (Symbol,Any)*)(implicit handler: BSFieldConstructor, @BSVersion.msgsArg)

+

+ It is a short version of b4.inputType for type="range". +

+ @bsExampleWithCode { + @b4.range( fooForm("range"), Symbol("_label") -> "Range (0 to 50)", Symbol("min") -> 0, Symbol("max") -> 50 ) + }{ + @@b4.range( fooForm("range"), Symbol("_label") -> "Range", Symbol("min") -> 0, Symbol("max") -> 50 ) + } + + +

+ It is a short version of b4.inputType for type="search". +

+ @bsExampleWithCode { + @b4.search( fooForm("search"), Symbol("_label") -> "Search" ) + }{ + @@b4.search( fooForm("search"), Symbol("_label") -> "Search" ) + } + +

b4.tel @@(field: Field, args: (Symbol,Any)*)(implicit handler: BSFieldConstructor, @BSVersion.msgsArg)

+

+ It is a short version of b4.inputType for type="tel". +

+ @bsExampleWithCode { + @b4.tel( fooForm("tel"), Symbol("_label") -> "Telephone" ) + }{ + @@b4.tel( fooForm("tel"), Symbol("_label") -> "Telephone" ) + } + +

b4.time @@(field: Field, args: (Symbol,Any)*)(implicit handler: BSFieldConstructor, @BSVersion.msgsArg)

+

+ It is a short version of b4.inputType for type="time". +

+ @bsExampleWithCode { + @b4.time( fooForm("time"), Symbol("_label") -> "Time" ) + }{ + @@b4.time( fooForm("time"), Symbol("_label") -> "Time" ) + } + +

b4.url @@(field: Field, args: (Symbol,Any)*)(implicit handler: BSFieldConstructor, @BSVersion.msgsArg)

+

+ It is a short version of b4.inputType for type="url". +

+ @bsExampleWithCode { + @b4.url( fooForm("url"), Symbol("_label") -> "URL" ) + }{ + @@b4.url( fooForm("url"), Symbol("_label") -> "URL" ) + } + +

b4.week @@(field: Field, args: (Symbol,Any)*)(implicit handler: BSFieldConstructor, @BSVersion.msgsArg)

+

+ It is a short version of b4.inputType for type="week". +

+ @bsExampleWithCode { + @b4.week( fooForm("week"), Symbol("_label") -> "Week" ) + }{ + @@b4.week( fooForm("week"), Symbol("_label") -> "Week" ) + } + + + + + +

More helpers

+

+ The following helpers use an auxiliar helper that creates a form-group without a field. + Here are the special arguments they use: +

    +
  • _id: the id for the form-group.
  • +
  • _class: the class for the form-group (the form-group class is always added).
  • +
  • _label: the text for the label.
  • +
  • _help: a help text below the input.
  • +
+

+ +

b4.static @@(label: String, args: (Symbol,Any)*)(text: => Html)(implicit fc: BSFieldConstructor)

+

+ It renders a static control to place within your form. It takes a HTML as parameter, so you can + render whatever you want. Actually, it is like a wrapper for a static HTML. +

+ @bsExampleWithCode { + @b4.static("Static HTML"){ This is a link } + }{ + @@b4.static("Static HTML"){ This is a link } + } +

+ There are two equivalent more versions of b4.static helper: one for labels with HTML, and another one to omit the label. Note that you can also have a hidden label using '_hideLabel' argument. +

+ @bsExampleWithCode { + @b4.static(Html("Label with icon ")){ Basic control with label } + @b4.static("Hidden label", Symbol("_hideLabel") -> true){ Basic control with hidden label } + @b4.static(){ Basic control without label } + }{ + @@b4.static(Html("Label with icon ")){ Basic control with label } + @@b4.static("Hidden label", Symbol("_hideLabel") -> true){ Basic control with hidden label } + @@b4.static(){ Basic control without label } + } + + +

b4.buttonType @@(buttonType: String, args: (Symbol,Any)*)(text: => Html)(implicit fc: b4.B4FieldConstructor)

+

+ It renders a simple button to place within your form. It takes a HTML as parameter, so you can + render whatever you want. +

+ @bsExampleWithCode { + @b4.buttonType("submit", Symbol("class") -> "btn btn-secondary"){ Sign in } + }{ + @@b4.buttonType("submit", Symbol("class") -> "btn btn-secondary"){ Sign in } + } + +

b4.submit @@(args: (Symbol,Any)*)(text: => Html)(implicit fc: BSFieldConstructor)

+

+ It is a short version of b4.buttonType for type="submit". +

+ @bsExampleWithCode { + @b4.submit(Symbol("class") -> "btn btn-primary"){ Sign in } + }{ + @@b4.submit(Symbol("class") -> "btn btn-primary"){ Sign in } + } + + +

b4.reset @@(args: (Symbol,Any)*)(text: => Html)(implicit fc: BSFieldConstructor)

+

+ It is a short version of b4.buttonType for type="reset". +

+ @bsExampleWithCode { + @b4.reset(Symbol("class") -> "btn btn-danger"){ Reset } + }{ + @@b4.reset(Symbol("class") -> "btn btn-danger"){ Reset } + } + +

b4.button @@(args: (Symbol,Any)*)(text: => Html)(implicit fc: BSFieldConstructor)

+

+ It is a short version of b4.buttonType for type="button". +

+ @bsExampleWithCode { + @b4.button(Symbol("class") -> "btn btn-secondary"){ Favorite } + }{ + @@b4.button(Symbol("class") -> "btn btn-secondary"){ Favorite } + } + + +

b4.free @@(args: (Symbol,Any)*)(content: => Html)(implicit fc: BSFieldConstructor)

+

+ It renders whatever you want within a form-group div. +

+ @bsExampleWithCode { + @b4.free(Symbol("_id") -> "idFormGroup") { + + Cancel + } + }{ + @@b4.free(Symbol("_id") -> "idFormGroup") { + + Cancel + } + } + + + + + + + + +

Your own custom helpers

+

+ The purpose of these helpers is to be a tool for creating your own helpers. Please see more about creating new helpers + here. +

+ +

b4.inputWrapped @@(inputType: String, field: Field, args: (Symbol,Any)*)(inputGroup: Html => Html)(implicit handler: BSFieldConstructor, @BSVersion.msgsArg)

+

+ This is the same as b4.inputType but specifying a custom wrapper for the input tag. + It is useful for input groups and inputs with validation states and feedback tooltips. +

+ @bsExampleWithCode { + @b4.inputWrapped( "email", fooForm("email"), Symbol("_label") -> "Email", Symbol("placeholder") -> "example@mail.com" ) { input => +
+
+ @@ +
+ @input + +
+ } + }{ + @@b4.inputWrapped( "email", fooForm("email"), Symbol("_label") -> "Email", Symbol("placeholder") -> "example@@mail.com" ) { input => +
+
+ @@@@ +
+ @@input + +
+ } + } + +

b4.multifield @@(fields: Field*)(args: (Symbol,Any)*)(inputsHtml: (BSFieldConstructor, @BSVersion.msgsClass) => Html)(implicit fc: BSFieldConstructor, @BSVersion.msgsArg)

+

+ Sometimes you may need two or more fields within the same line in a horizontal or vertical form (for a set of checkboxes, a date range, ...). +

+

+ The helper b4.multifield tries to: +

    +
  • Manage a set of fields and group them within the same form-group.
  • +
  • Manage all of their validation texts, help texts and constraints at the end of the form-group as if they were only one.
  • +
  • Take advantage of the helpers that are already implemented.
  • +
  • Be a tool to create your custom multifield helpers.
  • +
+

+

+ To know how it works and how to use it go the the Multifield section. +

+ + } +