Form controls

The b.Field constructor creates a field.

Modifier	Action
`b.Addons`	Attach the child controls together
`b.AddonsCentered`	Attach the child controls together and center them
`b.AddonsRight`	Attach the child controls together and align them to the right
`b.Grouped`	Group child controls together
`b.GroupedCentered`	Group child controls together and center them
`b.GroupedRight`	Group child controls together and align them to the right
`b.GroupedMultiline`	Group child controls together and allow them to fill up multiple lines
`b.Horizontal`	Make the field horizontal

The b.Label constructor creates a label.

The b.Control constructor creates a control element.

Modifier	Action
`b.IconsLeft`	Leave 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.IconsRight`	Leave 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.Expanded`	Expand 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.

Child	Action
`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.Element`	Add element to the `<div class="field-body">` element
Anything else	Apply 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

Name

Username

This username is available

Email

This email is invalid

Subject

Message

I agree to the terms and conditions

Yes No

<div class="field"><label class="label">Name</label><div class="control"><input class="input" type="text" placeholder="Text input"></div></div>
<div class="field"><label class="label">Username</label><div class="control has-icons-left has-icons-right"><input class="input is-success" type="text" placeholder="Text input" value="bulma"><span class="is-small is-left icon"><i class="fa-solid fa-user"></i></span><span class="is-small is-right icon"><i class="fa-check fa-solid"></i></span></div><p class="help is-success">This username is available</p></div>
<div class="field"><label class="label">Email</label><div class="control has-icons-left has-icons-right"><input class="input is-danger" type="email" placeholder="Email input" value="hello@"><span class="is-small is-left icon"><i class="fa-envelope fa-solid"></i></span><span class="is-small is-right icon"><i class="fa-solid fa-exclamation-triangle"></i></span></div><p class="help is-danger">This email is invalid</p></div>
<div class="field"><label class="label">Subject</label><div class="control"><div class="select"><select><option value="">Select dropdown</option><option value="">With options</option></select></div></div></div>
<div class="field"><label class="label">Message</label><div class="control"><textarea class="textarea" placeholder="Textarea"></textarea></div></div>
<div class="field"><div class="control"><label class="label">I agree to the <a href="#">terms and conditions</a></label></div></div>
<div class="field"><div class="control"><label class="radio"><input type="radio" name="question"> Yes</label><label class="radio"><input type="radio" name="question"> No</label></div></div>
<div class="field is-grouped"><div class="control"><button class="button is-link">Submit</button></div><div class="control"><button class="is-light button is-link">Cancel</button></div></div>

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

Label

This is a help text

<div class="field"><label class="label">Label</label><div class="control"><input class="input" type="text" placeholder="Text input"></div><p class="help">This is a help text</p></div>

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

Name

Email

<div class="field"><label class="label">Name</label><div class="control"><input class="input" type="text" placeholder="e.g Alex Smith"></div></div>
<div class="field"><label class="label">Email</label><div class="control"><input class="input" type="email" placeholder="e.g. alexsmith@gmail.com"></div></div>

Form control

Bulma documentation

Example

Code

b.Control(
	b.InputText(e.Placeholder("Text input")),
)

ResultHTML

<div class="control"><input class="input" type="text" placeholder="Text input"></div>

Example

Code

b.Control(
	b.Select(
		b.Option("", "Select dropdown"),
		b.Option("", "With options"),
	),
)

ResultHTML

<div class="control"><div class="select"><select><option value="">Select dropdown</option><option value="">With options</option></select></div></div>

Example

Code

b.Control(
	b.Button(b.Primary, "Submit"),
)

ResultHTML

<div class="control"><button class="button is-primary">Submit</button></div>

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

<div class="field"><div class="control has-icons-left has-icons-right"><input class="input" type="email" placeholder="Email"><span class="is-small is-left icon"><i class="fa-solid fa-envelope"></i></span><span class="is-right is-small icon"><i class="fa-check fa-solid"></i></span></div></div>
<div class="field"><div class="control has-icons-left"><input class="input" type="password" placeholder="Password"><span class="is-left is-small icon"><i class="fa-solid fa-lock"></i></span></div></div>
<div class="field"><div class="control"><button class="button is-success">Login</button></div></div>

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

<div class="field"><div class="control has-icons-left"><div class="select"><select><option value="" selected>Country</option><option value="">Select dropdown</option><option value="">With options</option></select></div><span class="is-small is-left icon"><i class="fa-solid fa-globe"></i></span></div></div>

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

Small input

<div class="field"><label class="label is-small">Small input</label><div class="has-icons-right control has-icons-left"><input class="input is-small" type="email" placeholder="Normal"><span class="is-left is-small icon"><i class="fa-solid fa-envelope"></i></span><span class="is-small is-right icon"><i class="fa-solid fa-check"></i></span></div></div>

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

Normal input

<div class="field"><label class="label">Normal input</label><div class="control has-icons-left has-icons-right"><input class="input" type="email" placeholder="Extra small"><span class="icon is-small is-left"><i class="fa-solid fa-envelope fa-xs"></i></span><span class="is-small is-right icon"><i class="fa-solid fa-check fa-xs"></i></span></div></div>
<div class="field"><div class="control has-icons-left has-icons-right"><input class="input" type="email" placeholder="Normal"><span class="is-left icon"><i class="fa-solid fa-envelope"></i></span><span class="is-right icon"><i class="fa-solid fa-check"></i></span></div></div>

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

Medium input

<div class="field"><label class="label is-medium">Medium input</label><div class="has-icons-right control has-icons-left"><input class="is-medium input" type="email" placeholder="Extra small"><span class="is-small icon is-left"><i class="fa-solid fa-envelope fa-xs"></i></span><span class="is-small is-right icon"><i class="fa-check fa-xs fa-solid"></i></span></div></div>
<div class="field"><div class="control has-icons-left has-icons-right"><input class="input is-medium" type="email" placeholder="Small"><span class="is-left icon"><i class="fa-solid fa-envelope fa-sm"></i></span><span class="is-right icon"><i class="fa-check fa-sm fa-solid"></i></span></div></div>
<div class="field"><div class="control has-icons-left has-icons-right"><input class="input is-medium" type="email" placeholder="Normal"><span class="is-medium is-left icon"><i class="fa-solid fa-envelope"></i></span><span class="icon is-medium is-right"><i class="fa-check fa-solid"></i></span></div></div>

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

Large input

<div class="field"><label class="label is-large">Large input</label><div class="control has-icons-left has-icons-right"><input class="input is-large" type="email" placeholder="Extra small"><span class="is-small is-left icon"><i class="fa-xs fa-solid fa-envelope"></i></span><span class="is-small is-right icon"><i class="fa-solid fa-check fa-xs"></i></span></div></div>
<div class="field"><div class="control has-icons-left has-icons-right"><input class="input is-large" type="email" placeholder="Small"><span class="is-left icon"><i class="fa-envelope fa-sm fa-solid"></i></span><span class="is-right icon"><i class="fa-check fa-sm fa-solid"></i></span></div></div>
<div class="field"><div class="control has-icons-left has-icons-right"><input class="is-large input" type="email" placeholder="Normal"><span class="is-large is-left icon"><i class="fa-solid fa-envelope"></i></span><span class="is-large is-right icon"><i class="fa-check fa-solid"></i></span></div></div>
<div class="field"><div class="has-icons-left has-icons-right control"><input class="input is-large" type="email" placeholder="Large"><span class="is-medium is-left icon"><i class="fa-solid fa-envelope fa-lg"></i></span><span class="is-medium is-right icon"><i class="fa-lg fa-solid fa-check"></i></span></div></div>

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

<div class="field has-addons"><div class="control"><input class="input" type="text" placeholder="Find a repository"></div><div class="control"><a class="button is-info">Search</a></div></div>

Example

Code

b.Field(
	b.Addons,
	b.Control(
		b.InputText(e.Placeholder("Your email")),
	),
	b.Control(
		b.ButtonA(b.Static, "@gmail.com"),
	),
)

ResultHTML

<div class="field has-addons"><div class="control"><input class="input" type="text" placeholder="Your email"></div><div class="control"><a class="button is-static">@gmail.com</a></div></div>

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

<div class="field has-addons"><div class="control"><div class="select"><span><option value="">$</option><option value="">£</option><option value="">€</option></span></div></div><div class="control"><input class="input" type="text" placeholder="Amount of money"></div><div class="control"><a class="button">Transfer</a></div></div>
<div class="field has-addons"><div class="control"><div class="select"><span><option value="">$</option><option value="">£</option><option value="">€</option></span></div></div><div class="control is-expanded"><input class="input" type="text" placeholder="Amount of money"></div><div class="control"><a class="button">Transfer</a></div></div>

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

<div class="field has-addons"><div class="control is-expanded"><div class="select is-fullwidth"><select name="country"><option value="Argentina">Argentina</option><option value="Bolivia">Bolivia</option><option value="Brazil">Brazil</option><option value="Chile">Chile</option><option value="Colombia">Colombia</option><option value="Ecuador">Ecuador</option><option value="Guyana">Guyana</option><option value="Paraguay">Paraguay</option><option value="Peru">Peru</option><option value="Suriname">Suriname</option><option value="Uruguay">Uruguay</option><option value="Venezuela">Venezuela</option></select></div></div><div class="control"><button class="button is-primary" type="submit">Choose</button></div></div>

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

<div class="has-addons has-addons-centered field"><div class="control"><div class="select"><span><option value="">$</option><option value="">£</option><option value="">€</option></span></div></div><div class="control"><input class="input" type="text" placeholder="Amount of money"></div><div class="control"><a class="button is-primary">Transfer</a></div></div>

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

<div class="has-addons has-addons-right field"><div class="control"><div class="select"><span><option value="">$</option><option value="">£</option><option value="">€</option></span></div></div><div class="control"><input class="input" type="text" placeholder="Amount of money"></div><div class="control"><a class="button is-primary">Transfer</a></div></div>

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

<div class="is-grouped field"><div class="control"><a class="button is-primary">Submit</a></div><div class="control"><a class="button is-light">Cancel</a></div></div>

Example

Code

b.Field(
	b.Grouped,
	b.GroupedCentered,
	b.Control(
		b.ButtonA(b.Primary, "Submit"),
	),
	b.Control(
		b.ButtonA(b.Light, "Cancel"),
	),
)

ResultHTML

<div class="field is-grouped is-grouped-centered"><div class="control"><a class="button is-primary">Submit</a></div><div class="control"><a class="is-light button">Cancel</a></div></div>

Example

Code

b.Field(
	b.Grouped,
	b.GroupedRight,
	b.Control(
		b.ButtonA(b.Primary, "Submit"),
	),
	b.Control(
		b.ButtonA(b.Light, "Cancel"),
	),
)

ResultHTML

<div class="field is-grouped is-grouped-right"><div class="control"><a class="button is-primary">Submit</a></div><div class="control"><a class="is-light button">Cancel</a></div></div>

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

<div class="field is-grouped"><div class="is-expanded control"><input class="input" type="text" placeholder="Find a repository"></div><div class="control"><a class="button is-info">Search</a></div></div>

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

<div class="field is-grouped is-grouped-multiline"><div class="control"><a class="button">One</a></div><div class="control"><a class="button">Two</a></div><div class="control"><a class="button">Three</a></div><div class="control"><a class="button">Four</a></div><div class="control"><a class="button">Five</a></div><div class="control"><a class="button">Six</a></div><div class="control"><a class="button">Seven</a></div><div class="control"><a class="button">Eight</a></div><div class="control"><a class="button">Nine</a></div><div class="control"><a class="button">Ten</a></div><div class="control"><a class="button">Eleven</a></div><div class="control"><a class="button">Twelve</a></div><div class="control"><a class="button">Thirteen</a></div></div>

Horizontal form

Bulma documentation

Example

ResultHTML

From

Do not enter the first zero

Department

Already a member?

Yes No

Subject

This field is required

Question

<div class="field is-horizontal"><div class="field-label is-normal"><label class="label">From</label></div><div class="field-body"><div class="field"><p class="control is-expanded has-icons-left"><input class="input" type="text" placeholder="Name"><span class="icon is-small is-left"><i class="fa-solid fa-user"></i></span></p></div><div class="field"><p class="control is-expanded has-icons-left has-icons-right"><input class="input is-success" type="email" placeholder="Email" value="alex@smith.com"><span class="is-small is-left icon"><i class="fa-envelope fa-solid"></i></span><span class="icon is-small is-right"><i class="fa-check fa-solid"></i></span></p></div></div></div>
<div class="field is-horizontal"><div class="field-label"></div><div class="field-body"><div class="field is-expanded"><div class="field has-addons"><p class="control"><a class="button is-static">+44</a></p><p class="is-expanded control"><input class="input" type="tel" placeholder="Your phone number"></p></div><p class="help">Do not enter the first zero</p></div></div></div>
<div class="field is-horizontal"><div class="field-label is-normal"><label class="label">Department</label></div><div class="field-body"><div class="field is-narrow"><div class="control"><div class="is-fullwidth select"><select><option value="">Business development</option><option value="">Marketing</option><option value="">Sales</option></select></div></div></div></div></div>
<div class="field is-horizontal"><div class="field-label"><label class="label">Already a member?</label></div><div class="field-body"><div class="is-narrow field"><div class="control"><label class="radio"><input type="radio" name="member"> Yes</label><label class="radio"><input type="radio" name="member"> No</label></div></div></div></div>
<div class="field is-horizontal"><div class="field-label is-normal"><label class="label">Subject</label></div><div class="field-body"><div class="field"><div class="control"><input class="input is-danger" type="text" placeholder="e.g. Partnership opportunity"></div><p class="help is-danger">This field is required</p></div></div></div>
<div class="field is-horizontal"><div class="field-label is-normal"><label class="label">Question</label></div><div class="field-body"><div class="field"><div class="control"><textarea class="textarea" placeholder="Explain how we can help you"></textarea></div></div></div></div>
<div class="field is-horizontal"><div class="field-label"></div><div class="field-body"><div class="field"><div class="control"><button class="button is-primary">Send message</button></div></div></div></div>

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

No padding

Checkbox

Small padding

Normal label

Medium label

Large label

<div class="field is-horizontal"><div class="field-label"><label class="label">No padding</label></div><div class="field-body"><div class="field"><div class="control"><label class="checkbox"><input type="checkbox"> Checkbox</label></div></div></div></div>
<div class="field is-horizontal"><div class="field-label is-small"><label class="label">Small padding</label></div><div class="field-body"><div class="field"><div class="control"><input class="input is-small" type="text" placeholder="Small sized input"></div></div></div></div>
<div class="field is-horizontal"><div class="field-label is-normal"><label class="label">Normal label</label></div><div class="field-body"><div class="field"><div class="control"><input class="input" type="text" placeholder="Normal sized input"></div></div></div></div>
<div class="field is-horizontal"><div class="is-medium field-label"><label class="label">Medium label</label></div><div class="field-body"><div class="field"><div class="control"><input class="input is-medium" type="text" placeholder="Medium sized input"></div></div></div></div>
<div class="field is-horizontal"><div class="is-large field-label"><label class="label">Large label</label></div><div class="field-body"><div class="field"><div class="control"><input class="input is-large" type="text" placeholder="Large sized input"></div></div></div></div>

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

Name

Email

<fieldset disabled><div class="field"><label class="label">Name</label><div class="control"><input class="input" type="text" placeholder="e.g Alex Smith"></div></div><div class="field"><label class="label">Email</label><div class="control"><input class="input" type="email" placeholder="e.g. alexsmith@gmail.com"></div></div></fieldset>