Form controls

The b.Field constructor creates a field.

ModifierAction
b.AddonsAttach the child controls together
b.AddonsCenteredAttach the child controls together and center them
b.AddonsRightAttach the child controls together and align them to the right
b.GroupedGroup child controls together
b.GroupedCenteredGroup child controls together and center them
b.GroupedRightGroup child controls together and align them to the right
b.GroupedMultilineGroup child controls together and allow them to fill up multiple lines
b.HorizontalMake the field horizontal

The b.Label constructor creates a label.

The b.Control constructor creates a control element.

ModifierAction
b.IconsLeftLeave space on the left side of the input or select child for an icon - the b.Icon element must be a direct child of b.Control and have the b.Left modifier
b.IconsRightLeave space on the right side of the input or select child for an icon - the b.Icon element must be a direct child of b.Control and have the b.Right modifier
b.ExpandedExpand the control to fill the available width - to apply this style to a <select> element, you must also add the b.FullWidth modifier to the b.Select constructor

The b.Help constructor creates a help element, to be used as a child of a b.Field.

The b.FieldHorizontal constructor creates a horizontal field.

ChildAction
b.OnField(...any)Apply children to the <div class="field"> element
b.OnLabel(...any)Apply children to the <div class="field-label"> element
b.OnBody(...any)Apply children to the <div class="field-body"> element
b.Label(...any)Add label to the <div class="field-label"> element
e.ElementAdd element to the <div class="field-body"> element
Anything elseApply child to the <div class="field"> element

Bulma examples

Bulma documentation

Complete form example

Bulma documentation
Example
Code
b.Field(
	b.Label("Name"),
	b.Control(
		b.InputText(e.Placeholder("Text input")),
	),
),
b.Field(
	b.Label("Username"),
	b.Control(
		b.IconsLeft, b.IconsRight,
		b.InputText(
			b.Success,
			e.Placeholder("Text input"),
			e.Value("bulma"),
		),
		fa.Icon(fa.Solid, "user", b.Small, b.Left),
		fa.Icon(fa.Solid, "check", b.Small, b.Right),
	),
	b.Help(b.Success, "This username is available"),
),
b.Field(
	b.Label("Email"),
	b.Control(
		b.IconsLeft, b.IconsRight,
		b.InputEmail(
			b.Danger,
			e.Placeholder("Email input"),
			e.Value("hello@"),
		),
		fa.Icon(fa.Solid, "envelope", b.Small, b.Left),
		fa.Icon(fa.Solid, "exclamation-triangle", b.Small, b.Right),
	),
	b.Help(b.Danger, "This email is invalid"),
),
b.Field(
	b.Label("Subject"),
	b.Control(
		b.Select(
			b.Option("", "Select dropdown"),
			b.Option("", "With options"),
		),
	),
),
b.Field(
	b.Label("Message"),
	b.Control(
		b.Textarea(e.Placeholder("Textarea")),
	),
),
b.Field(
	b.Control(
		b.Label(
			"I agree to the ", e.AHref("#", "terms and conditions"),
		),
	),
),
b.Field(
	b.Control(
		b.Radio(
			e.Name("question"),
			"Yes",
		),
		b.Radio(
			e.Name("question"),
			"No",
		),
	),
),
b.Field(
	b.Grouped,
	b.Control(
		b.Button(b.Link, "Submit"),
	),
	b.Control(
		b.Button(b.Link, b.Light, "Cancel"),
	),
),
ResultHTML

This username is available

This email is invalid

Form field

Bulma documentation
Example
Code
b.Field(
	b.Label("Label"),
	b.Control(
		b.InputText(e.Placeholder("Text input")),
	),
	b.Help("This is a help text"),
)
ResultHTML

This is a help text

Example
Code
b.Field(
	b.Label("Name"),
	b.Control(
		b.InputText(e.Placeholder("e.g Alex Smith")),
	),
),
b.Field(
	b.Label("Email"),
	b.Control(
		b.InputEmail(e.Placeholder("e.g. alexsmith@gmail.com")),
	),
)
ResultHTML

Form control

Bulma documentation
Example
Code
b.Control(
	b.InputText(e.Placeholder("Text input")),
)
ResultHTML
Example
Code
b.Control(
	b.Select(
		b.Option("", "Select dropdown"),
		b.Option("", "With options"),
	),
)
ResultHTML
Example
Code
b.Control(
	b.Button(b.Primary, "Submit"),
)
ResultHTML

With icons

Bulma documentation
Example
Code
b.Field(
	b.Control(
		b.IconsLeft, b.IconsRight,
		b.InputEmail(e.Placeholder("Email")),
		fa.Icon(fa.Solid, "envelope", b.Small, b.Left),
		fa.Icon(fa.Solid, "check", b.Small, b.Right),
	),
),
b.Field(
	b.Control(
		b.IconsLeft,
		b.InputPassword(e.Placeholder("Password")),
		fa.Icon(fa.Solid, "lock", b.Small, b.Left),
	),
),
b.Field(
	b.Control(
		b.Button(b.Success, "Login"),
	),
)
ResultHTML
Example
Code
b.Field(
	b.Control(
		b.IconsLeft,
		b.Select(
			b.OptionSelected("", "Country"),
			b.Option("", "Select dropdown"),
			b.Option("", "With options"),
		),
		fa.Icon(fa.Solid, "globe", b.Small, b.Left),
	),
)
ResultHTML
Example
Code
b.Field(
	b.Label(b.Small, "Small input"),
	b.Control(
		b.IconsLeft, b.IconsRight,
		b.InputEmail(b.Small, e.Placeholder("Normal")),
		fa.Icon(fa.Solid, "envelope", b.Small, b.Left),
		fa.Icon(fa.Solid, "check", b.Small, b.Right),
	),
)
ResultHTML
Example
Code
b.Field(
	b.Label("Normal input"),
	b.Control(
		b.IconsLeft, b.IconsRight,
		b.InputEmail(e.Placeholder("Extra small")),
		fa.Icon(fa.Solid, "envelope", fa.SizeXs, b.Small, b.Left),
		fa.Icon(fa.Solid, "check", fa.SizeXs, b.Small, b.Right),
	),
),
b.Field(
	b.Control(
		b.IconsLeft, b.IconsRight,
		b.InputEmail(e.Placeholder("Normal")),
		fa.Icon(fa.Solid, "envelope", b.Left),
		fa.Icon(fa.Solid, "check", b.Right),
	),
)
ResultHTML
Example
Code
b.Field(
	b.Label(b.Medium, "Medium input"),
	b.Control(
		b.IconsLeft, b.IconsRight,
		b.InputEmail(b.Medium, e.Placeholder("Extra small")),
		fa.Icon(fa.Solid, "envelope", fa.SizeXs, b.Small, b.Left),
		fa.Icon(fa.Solid, "check", fa.SizeXs, b.Small, b.Right),
	),
),
b.Field(
	b.Control(
		b.IconsLeft, b.IconsRight,
		b.InputEmail(b.Medium, e.Placeholder("Small")),
		fa.Icon(fa.Solid, "envelope", fa.SizeSm, b.Left),
		fa.Icon(fa.Solid, "check", fa.SizeSm, b.Right),
	),
),
b.Field(
	b.Control(
		b.IconsLeft, b.IconsRight,
		b.InputEmail(b.Medium, e.Placeholder("Normal")),
		fa.Icon(fa.Solid, "envelope", b.Medium, b.Left),
		fa.Icon(fa.Solid, "check", b.Medium, b.Right),
	),
)
ResultHTML
Example
Code
b.Field(
	b.Label(b.Large, "Large input"),
	b.Control(
		b.IconsLeft, b.IconsRight,
		b.InputEmail(b.Large, e.Placeholder("Extra small")),
		fa.Icon(fa.Solid, "envelope", fa.SizeXs, b.Small, b.Left),
		fa.Icon(fa.Solid, "check", fa.SizeXs, b.Small, b.Right),
	),
),
b.Field(
	b.Control(
		b.IconsLeft, b.IconsRight,
		b.InputEmail(b.Large, e.Placeholder("Small")),
		fa.Icon(fa.Solid, "envelope", fa.SizeSm, b.Left),
		fa.Icon(fa.Solid, "check", fa.SizeSm, b.Right),
	),
),
b.Field(
	b.Control(
		b.IconsLeft, b.IconsRight,
		b.InputEmail(b.Large, e.Placeholder("Normal")),
		fa.Icon(fa.Solid, "envelope", b.Large, b.Left),
		fa.Icon(fa.Solid, "check", b.Large, b.Right),
	),
),
b.Field(
	b.Control(
		b.IconsLeft, b.IconsRight,
		b.InputEmail(b.Large, e.Placeholder("Large")),
		fa.Icon(fa.Solid, "envelope", fa.SizeLg, b.Medium, b.Left),
		fa.Icon(fa.Solid, "check", fa.SizeLg, b.Medium, b.Right),
	),
)
ResultHTML

Form addons

Bulma documentation
Example
Code
b.Field(
	b.Addons,
	b.Control(
		b.InputText(e.Placeholder("Find a repository")),
	),
	b.Control(
		b.ButtonA(b.Info, "Search"),
	),
)
ResultHTML
Example
Code
b.Field(
	b.Addons,
	b.Control(
		b.InputText(e.Placeholder("Your email")),
	),
	b.Control(
		b.ButtonA(b.Static, "@gmail.com"),
	),
)
ResultHTML
Example
Code
b.Field(
	b.Addons,
	b.Control(
		b.Select(
			html.Span,
			b.Option("", "$"),
			b.Option("", "£"),
			b.Option("", "€"),
		),
	),
	b.Control(
		b.InputText(e.Placeholder("Amount of money")),
	),
	b.Control(
		b.ButtonA("Transfer"),
	),
),
b.Field(
	b.Addons,
	b.Control(
		b.Select(
			html.Span,
			b.Option("", "$"),
			b.Option("", "£"),
			b.Option("", "€"),
		),
	),
	b.Control(
		b.Expanded,
		b.InputText(e.Placeholder("Amount of money")),
	),
	b.Control(
		b.ButtonA("Transfer"),
	),
)
ResultHTML
Transfer
Transfer
Example
Code
b.Field(
	b.Addons,
	b.Control(
		b.Expanded,
		b.Select(
			b.FullWidth,
			e.Name("country"),
			b.Option("Argentina", "Argentina"),
			b.Option("Bolivia", "Bolivia"),
			b.Option("Brazil", "Brazil"),
			b.Option("Chile", "Chile"),
			b.Option("Colombia", "Colombia"),
			b.Option("Ecuador", "Ecuador"),
			b.Option("Guyana", "Guyana"),
			b.Option("Paraguay", "Paraguay"),
			b.Option("Peru", "Peru"),
			b.Option("Suriname", "Suriname"),
			b.Option("Uruguay", "Uruguay"),
			b.Option("Venezuela", "Venezuela"),
		),
	),
	b.Control(
		b.ButtonSubmit(b.Primary, "Choose"),
	),
)
ResultHTML
Example
Code
b.Field(
	b.AddonsCentered,
	b.Control(
		b.Select(
			html.Span,
			b.Option("", "$"),
			b.Option("", "£"),
			b.Option("", "€"),
		),
	),
	b.Control(
		b.InputText(e.Placeholder("Amount of money")),
	),
	b.Control(
		b.ButtonA(b.Primary, "Transfer"),
	),
)
ResultHTML
Transfer
Example
Code
b.Field(
	b.AddonsRight,
	b.Control(
		b.Select(
			html.Span,
			b.Option("", "$"),
			b.Option("", "£"),
			b.Option("", "€"),
		),
	),
	b.Control(
		b.InputText(e.Placeholder("Amount of money")),
	),
	b.Control(
		b.ButtonA(b.Primary, "Transfer"),
	),
)
ResultHTML
Transfer

Form group

Bulma documentation
Example
Code
b.Field(
	b.Grouped,
	b.Control(
		b.ButtonA(b.Primary, "Submit"),
	),
	b.Control(
		b.ButtonA(b.Light, "Cancel"),
	),
)
ResultHTML
Example
Code
b.Field(
	b.Grouped,
	b.GroupedCentered,
	b.Control(
		b.ButtonA(b.Primary, "Submit"),
	),
	b.Control(
		b.ButtonA(b.Light, "Cancel"),
	),
)
ResultHTML
Example
Code
b.Field(
	b.Grouped,
	b.GroupedRight,
	b.Control(
		b.ButtonA(b.Primary, "Submit"),
	),
	b.Control(
		b.ButtonA(b.Light, "Cancel"),
	),
)
ResultHTML
Example
Code
b.Field(
	b.Grouped,
	b.Control(
		b.Expanded,
		b.InputText(e.Placeholder("Find a repository")),
	),
	b.Control(
		b.ButtonA(b.Info, "Search"),
	),
)
ResultHTML
Example
Code
b.Field(
	b.GroupedMultiline,
	b.Control(b.ButtonA("One")),
	b.Control(b.ButtonA("Two")),
	b.Control(b.ButtonA("Three")),
	b.Control(b.ButtonA("Four")),
	b.Control(b.ButtonA("Five")),
	b.Control(b.ButtonA("Six")),
	b.Control(b.ButtonA("Seven")),
	b.Control(b.ButtonA("Eight")),
	b.Control(b.ButtonA("Nine")),
	b.Control(b.ButtonA("Ten")),
	b.Control(b.ButtonA("Eleven")),
	b.Control(b.ButtonA("Twelve")),
	b.Control(b.ButtonA("Thirteen")),
)
ResultHTML

Horizontal form

Bulma documentation
Example
ResultHTML

+44

Do not enter the first zero

This field is required

Code
b.FieldHorizontal(
	b.FieldLabel(b.Normal, b.Label("From")),
	b.Field(
		b.Control(
			html.P,
			b.Expanded,
			b.IconsLeft,
			b.InputText(e.Placeholder("Name")),
			fa.Icon(fa.Solid, "user", b.Small, b.Left),
		),
	),
	b.Field(
		b.Control(
			html.P,
			b.Expanded,
			b.IconsLeft,
			b.IconsRight,
			b.InputEmail(b.Success, e.Placeholder("Email"), e.Value("alex@smith.com")),
			fa.Icon(fa.Solid, "envelope", b.Small, b.Left),
			fa.Icon(fa.Solid, "check", b.Small, b.Right),
		),
	),
),
b.FieldHorizontal(
	b.FieldLabel(),
	b.Field(
		b.Expanded,
		b.Field(
			b.Addons,
			b.Control(html.P, b.ButtonA(b.Static, "+44")),
			b.Control(html.P, b.Expanded, b.InputTel(e.Placeholder("Your phone number")))),
		b.Help("Do not enter the first zero"),
	),
),
b.FieldHorizontal(
	b.FieldLabel(b.Normal, b.Label("Department")),
	b.Field(
		b.Narrow,
		b.Control(b.Select(
			b.FullWidth,
			b.Option("", "Business development"),
			b.Option("", "Marketing"),
			b.Option("", "Sales"),
		)),
	),
),
b.FieldHorizontal(
	b.FieldLabel(b.Label("Already a member?")),
	b.Field(
		b.Narrow,
		b.Control(
			b.Radio(e.Name("member"), "Yes"),
			b.Radio(e.Name("member"), "No"),
		),
	),
),
b.FieldHorizontal(
	b.FieldLabel(b.Normal, b.Label("Subject")),
	b.Field(
		b.Control(b.InputText(
			b.Danger,
			e.Placeholder("e.g. Partnership opportunity"),
		)),
		b.Help(b.Danger, "This field is required"),
	),
),
b.FieldHorizontal(
	b.FieldLabel(b.Normal, b.Label("Question")),
	b.Field(
		b.Control(b.Textarea(e.Placeholder("Explain how we can help you"))),
	),
),
b.FieldHorizontal(
	b.FieldLabel(),
	b.Field(
		b.Control(b.Button(b.Primary, "Send message")),
	),
)
Example
ResultHTML
Code
b.FieldHorizontal(
	b.FieldLabel(b.Label("No padding")),
	b.Field(b.Control(b.Checkbox("Checkbox"))),
),
b.FieldHorizontal(
	b.FieldLabel(b.Small, b.Label("Small padding")),
	b.Field(b.Control(b.InputText(b.Small, e.Placeholder("Small sized input")))),
),
b.FieldHorizontal(
	b.FieldLabel(b.Normal, b.Label("Normal label")),
	b.Field(b.Control(b.InputText(e.Placeholder("Normal sized input")))),
),
b.FieldHorizontal(
	b.FieldLabel(b.Medium, b.Label("Medium label")),
	b.Field(b.Control(b.InputText(b.Medium, e.Placeholder("Medium sized input")))),
),
b.FieldHorizontal(
	b.FieldLabel(b.Large, b.Label("Large label")),
	b.Field(b.Control(b.InputText(b.Large, e.Placeholder("Large sized input")))),
)

Disabled form

Bulma documentation
Example
Code
e.FieldSet(
	e.Disabled(),
	b.Field(
		b.Label("Name"),
		b.Control(
			b.InputText(e.Placeholder("e.g Alex Smith")),
		),
	),
	b.Field(
		b.Label("Email"),
		b.Control(
			b.InputEmail(e.Placeholder("e.g. alexsmith@gmail.com")),
		),
	),
)
ResultHTML