bootstrap-formgroup

Bootstrap powered FormGroup Addon for Vaadin

View larger

Close

View larger

Close

View larger

Close

Just another helper to build a more accessible and mobile friendly form with the power of Bootstrap 4 and Vaadin 8.

This addon helps you to easily create a good looking and accessible form with Bootstrap 4 combined with Valo as Theming Engine.

This Addon doesn't integrate Bootstrap in your project, you have to do it yourself!

The following is currently supported:

• most of the input components (see github)
• better accessibility by default
• captions are rendered as labels and always with aria-labelledby and for combined with the input
• all fields can get a description, the field is automatically linked to the description with aria-describedby
• the same goes for error messages, the area below the field's description is called feedback - this area is also aria-describedby if it's not empty - useful for validation results.
• FormGroupRatio to fully use the magic of bootstrap (see the example app)
• bootstrap coloring (danger, warning & success)

Sample code

Form form = new Form(false)
    .addHeaderRow(new Label("<h2>Your Awesome Login Form</h2>", ContentMode.HTML))
    .addRow(new TextFieldGroup("Username"))
    .addRow(new PasswordFieldGroup("Password"))
    .addRow(new CheckBoxGroup("Remember me"))
    .addFooterRow(new Button("Login", this));
addComponent(form.create());

Links

• Online Demo
• Issue Tracker
• Source Code

Compatibility