HORIZON HASKELLDocslts/ghc-9.10.xc74966e2026-09-27Search names, modules, packages, or :: a typeCtrl K

GHC 9.10.3 · lts/ghc-9.10.x · c74966e · 2026-09-27

Moduleyesod-form-1.7.9Haskell2010

Yesod.Form.Bootstrap3

Helper functions for creating forms when using Bootstrap 3.

  • 3 types
  • 8 values
  • Packageyesod-form-1.7.9
  • Exports11
  • LanguageHaskell2010
  • LicenceMIT
  • SourceBootstrap3.hs

Example: Rendering a basic form

0 declarations

<input> tags in Bootstrap 3 require the form-control class, and so they need modified FieldSettings to display correctly.

When creating your forms, use the bfs function to add this class:

personForm :: AForm Handler Person
personForm = Person
       <$> areq textField (bfs ("Name" :: Text)) Nothing
       <*> areq textField (bfs ("Surname" :: Text)) Nothing

That form can then be rendered into a widget using the renderBootstrap3 function. Here, the form is laid out vertically using BootstrapBasicForm:

(formWidget, formEnctype) <- generateFormPost $ renderBootstrap3 BootstrapBasicForm personForm

And then used in Hamlet:

 <form role=form method=post action=@{ActionR} enctype=#{formEnctype}>
   ^{formWidget}
   <button type="submit" .btn .btn-default>Submit

Example: Rendering a horizontal form

0 declarations

Yesod.Form.Bootstrap3 also supports horizontal, grid based forms. These forms require additional markup for the submit tag, which is provided by the bootstrapSubmit function:

personForm :: AForm Handler Person
personForm = Person
       <$> areq textField MsgName Nothing
       <*> areq textField MsgSurname Nothing
       <*  bootstrapSubmit (BootstrapSubmit MsgSubmit "btn-default" [("attribute-name","attribute-value")])
       -- Note: bootstrapSubmit works with all BootstrapFormLayouts, but provides the additional markup required for Bootstrap's horizontal forms.

That form can be rendered with specific grid spacing:

(formWidget, formEnctype) <- generateFormPost $ renderBootstrap3 (BootstrapHorizontalForm (ColSm 0) (ColSm 4) (ColSm 0) (ColSm 6)) personForm

And then used in Hamlet. Note the additional form-horizontal class on the form, and that a manual submit tag isn't required:

 <form .form-horizontal role=form method=post action=@{ActionR} enctype=#{formEnctype}>
   ^{formWidget}

Rendering forms

3 declarations
datadata BootstrapFormLayout
#

The layout used for the bootstrap form.

Since: yesod-form 1.3.8

Constructors

Instances1Show

Field settings

5 declarations

This module comes with several methods to help customize your Bootstrap 3 <input>s. These functions can be chained together to apply several properties to an input:

userForm :: AForm Handler UserForm
userForm = UserForm
       <$> areq textField nameSettings Nothing
     where nameSettings = withAutofocus $
                          withPlaceholder "First name" $
                          (bfs ("Name" :: Text))

Submit button

3 declarations
valuebootstrapSubmit
  1. :: (RenderMessage site msg, HandlerSite m ~ site, MonadHandler m)
  2. => BootstrapSubmit msg
  3. -> AForm m ()
#

A Bootstrap v3 submit button disguised as a field for convenience. For example, if your form currently is:

Person <$> areq textField "Name"    Nothing
       <*> areq textField "Surname" Nothing

Then just change it to:

Person <$> areq textField "Name"    Nothing
       <*> areq textField "Surname" Nothing
       <*  bootstrapSubmit ("Register" :: BootstrapSubmit Text)

(Note that <* is not a typo.)

Alternatively, you may also just create the submit button manually as well in order to have more control over its layout.

Since: yesod-form 1.3.8