Select | Bulma-Gomponents

Select

The b.Select constructor creates a dropdown select.

Modifier	Action
`b.Size(int)`	For multiple selects, set size to the specified number of options
`b.Rounded`	Make the select rounded
`b.Hovered`	Apply the hovered style
`b.Focused`	Apply the focused style
`b.Multiple`	Make the select a multiple select
`b.Disabled`	Disable the select
`b.Loading`	Add a loading spinner to the right of the select
`b.Primary`	Set color to primary
`b.Link`	Set color to link
`b.Info`	Set color to info
`b.Success`	Set color to success
`b.Warning`	Set color to warning
`b.Danger`	Set color to danger
`b.Small`	Set size to small
`b.Normal`	Set size to normal
`b.Medium`	Set size to medium
`b.Large`	Set size to large

Child	Action
`b.OnSelect(...any)`	Apply children to the `<select>` element
`b.OnDiv(...any)`	Apply children to the `<div class="select">` element
Anything else	Apply child to the `<div class="select">` element

The b.Option constructor creates an option element to be used as a child of b.Select.

Modifier	Action
`b.Selected`	Mark the option as selected (for multiple selects)

Bulma examples

Bulma documentation

Example

Code

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

ResultHTML

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

Multiple select

Bulma documentation

Example

Code

b.Select(
	b.Multiple,
	b.Size(8),
	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"),
)

ResultHTML

<div class="select is-multiple" size="8"><select multiple><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>

Colors

Bulma documentation

Example

Code

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

ResultHTML

<div class="select is-primary"><select><option value="">Select dropdown</option><option value="">With options</option></select></div>

Example

Code

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

ResultHTML

<div class="select is-link"><select><option value="">Select dropdown</option><option value="">With options</option></select></div>

Example

Code

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

ResultHTML

<div class="is-info select"><select><option value="">Select dropdown</option><option value="">With options</option></select></div>

Example

Code

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

ResultHTML

<div class="select is-success"><select><option value="">Select dropdown</option><option value="">With options</option></select></div>

Example

Code

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

ResultHTML

<div class="select is-warning"><select><option value="">Select dropdown</option><option value="">With options</option></select></div>

Example

Code

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

ResultHTML

<div class="is-danger select"><select><option value="">Select dropdown</option><option value="">With options</option></select></div>

Styles

Bulma documentation

Example

Code

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

ResultHTML

<div class="select is-rounded"><select><option value="">Rounded dropdown</option><option value="">With options</option></select></div>

Sizes

Bulma documentation

Example

Code

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

ResultHTML

<div class="select is-small"><select><option value="">Select dropdown</option><option value="">With options</option></select></div>

Example

Code

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

ResultHTML

<div class="is-normal select"><select><option value="">Select dropdown</option><option value="">With options</option></select></div>

Example

Code

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

ResultHTML

<div class="is-medium select"><select><option value="">Select dropdown</option><option value="">With options</option></select></div>

Example

Code

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

ResultHTML

<div class="select is-large"><select><option value="">Select dropdown</option><option value="">With options</option></select></div>

States

Bulma documentation

Example

Code

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

ResultHTML

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

Example

Code

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

ResultHTML

<div class="select"><select class="is-hovered"><option value="">Select dropdown</option><option value="">With options</option></select></div>

Example

Code

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

ResultHTML

<div class="select"><select class="is-focused"><option value="">Select dropdown</option><option value="">With options</option></select></div>

Example

Code

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

ResultHTML

<div class="select is-loading"><select><option value="">Select dropdown</option><option value="">With options</option></select></div>

With icons

Bulma documentation

Example

Code

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="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>

Example

Code

b.Control(
	b.IconsLeft,
	b.Select(
		b.Small,
		b.OptionSelected("", "Country"),
		b.Option("", "Select dropdown"),
		b.Option("", "With options"),
	),
	fa.Icon(fa.Solid, "globe", b.Small, b.Left),
)

ResultHTML

<div class="control has-icons-left"><div class="select is-small"><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>

Example

Code

b.Control(
	b.IconsLeft,
	b.Select(
		b.OptionSelected("", "Country"),
		b.Option("", "Select dropdown"),
		b.Option("", "With options"),
	),
	fa.Icon(fa.Solid, "globe", b.Left),
)

ResultHTML

<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-left icon"><i class="fa-solid fa-globe"></i></span></div>

Example

Code

b.Control(
	b.IconsLeft,
	b.Select(
		b.Medium,
		b.OptionSelected("", "Country"),
		b.Option("", "Select dropdown"),
		b.Option("", "With options"),
	),
	fa.Icon(fa.Solid, "globe", b.Medium, b.Left),
)

ResultHTML

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

Example

Code

b.Control(
	b.IconsLeft,
	b.Select(
		b.Large,
		b.OptionSelected("", "Country"),
		b.Option("", "Select dropdown"),
		b.Option("", "With options"),
	),
	fa.Icon(fa.Solid, "globe", b.Large, b.Left),
)

ResultHTML

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