Bulma

Default form

Text input *

help on a text_input

Textarea *

help on a textarea

Radio buttons *

Option one is this and that be sure to include why it's great

Option two can is something else and selecting it will deselect option one

help on a radio_buttons

Inline radio buttons *

option_one option_two

help on a inline_radio_buttons

Checkboxes *

Option one is this and that be sure to include why it's great

Option two can also be checked and included in form results

Option three can yes, you guessed it also be checked and included in form results

Note: Labels surround all the options for much larger click areas and a more usable form.

Inline checkboxes *

it's a bird it's a plane it's something else !

help on a inline_checkboxes

Icon field *

Here's more help text this time on an icon field

Select *

Direction to go

Multicolon select *

This strange option climbing out of the box is in the examples too Only without Flexbox https://v4-alpha.getbootstrap.com/components/forms/#form-controls

Boolean field *

file_field *

Choose a file ... ...

with widgets.FileInput()

file_field_raw *

with default widget

Text input a *

Text input b *

Text input c *

Integer input *

Decimal input *

Url input *

Time input *

Date input *

Default form with failing validation #

Text input *

This field is required.

help on a text_input

Textarea *

This field is required.

help on a textarea

Radio buttons *

Option one is this and that be sure to include why it's great

Option two can is something else and selecting it will deselect option one

This field is required.

help on a radio_buttons

Inline radio buttons *

option_one option_two

This field is required.

help on a inline_radio_buttons

Checkboxes *

Option one is this and that be sure to include why it's great

Option two can also be checked and included in form results

Option three can yes, you guessed it also be checked and included in form results

This field is required.

Note: Labels surround all the options for much larger click areas and a more usable form.

Inline checkboxes *

it's a bird it's a plane it's something else !

This field is required.

help on a inline_checkboxes

Icon field *

This field is required.

Here's more help text this time on an icon field

Select *

This field is required.

Direction to go

Multicolon select *

This field is required.

This strange option climbing out of the box is in the examples too Only without Flexbox https://v4-alpha.getbootstrap.com/components/forms/#form-controls

Boolean field *

This field is required.

file_field *

Choose a file ... ...

This field is required.

with widgets.FileInput()

file_field_raw *

This field is required.

with default widget

Text input a *

This field is required.

Text input b *

This field is required.

Text input c *

This field is required.

Integer input *

This field is required.

Decimal input *

This field is required.

Url input *

This field is required.

Time input *

This field is required.

Date input *

This field is required.

Model form #

My file

Currently: ./somedire/somedire/somedire/somedire/somedire/somedire/somedire/somedire/somedire/somedire/myfile-myfile-myfile-myfile-myfile-myfile-myfile-myfile-myfile-myfile-.txt Clear

Change ./somedire/somedire/somedire/somedire/somedire/somedire/somedire/somedire/somedire/somedire/myfile-myfile-myfile-myfile-myfile-myfile-myfile-myfile-myfile-myfile-.txt

help

My char

help

Horizontal Model form #

My file

Currently: ./somedire/somedire/somedire/somedire/somedire/somedire/somedire/somedire/somedire/somedire/myfile-myfile-myfile-myfile-myfile-myfile-myfile-myfile-myfile-myfile-.txt Clear
Change:

help

My char

help

Horizontal form #

Text input *

Textarea *

Radio buttons *

Option one is this and that be sure to include why it's great

Option two can is something else and selecting it will deselect option one

help on a radio_buttons

Inline radio buttons *

option_one option_two

help on a inline_radio_buttons

Checkboxes *

Option one is this and that be sure to include why it's great

Option two can also be checked and included in form results

Option three can yes, you guessed it also be checked and included in form results

Note: Labels surround all the options for much larger click areas and a more usable form.

Inline checkboxes *

it's a bird it's a plane it's something else !

help on a inline_checkboxes

Select *

Direction to go

Multicolon select *

This strange option climbing out of the box is in the examples too Only without Flexbox https://v4-alpha.getbootstrap.com/components/forms/#form-controls

Boolean field *

File field *

Choose a file ... ...

with FileInput widget

File field raw *

with default widget

Horizontal form with failing validation #

Text input *

This field is required.

Textarea *

This field is required.

Radio buttons *

Option one is this and that be sure to include why it's great

Option two can is something else and selecting it will deselect option one

This field is required.

help on a radio_buttons

Inline radio buttons *

option_one option_two

This field is required.

help on a inline_radio_buttons

Checkboxes *

Option one is this and that be sure to include why it's great

Option two can also be checked and included in form results

Option three can yes, you guessed it also be checked and included in form results

This field is required.

Note: Labels surround all the options for much larger click areas and a more usable form.

Inline checkboxes *

it's a bird it's a plane it's something else !

This field is required.

help on a inline_checkboxes

Select *

This field is required.

Direction to go

Multicolon select *

This field is required.

This strange option climbing out of the box is in the examples too Only without Flexbox https://v4-alpha.getbootstrap.com/components/forms/#form-controls

Boolean field *

This field is required.

File field *

Choose a file ... ...

This field is required.

with FileInput widget

File field raw *

This field is required.

with default widget