Controls

Additional form controls.

Get Started

1

File inputs

Button Style

A simple button file input to put in forms for simple uploads. File name displaying is handle via Javascript. If your requirements are heavier, head to the File uploader section.

Field Style

You may need to diplay a file input as an input field. Check the example below.

Choose File No file selected
SHOW CODE
2

Default checkboxes

Checkbox

Basic checkboxes have a light markup and work well in all browsers.

SHOW CODE

Radio buttons

Radio groups can have their size and colors customized individually. Available color classes are .is-primary, .is-secondary and .is-accent.

SHOW CODE
3

Colored checkboxes

Square checkboxes

Square checkboxes are handy when you need multiple checkboxes at once. 8 colors are available: default, .is-info, .is-success, .is-warning, .is-danger, .is-primary, .is-secondary and .is-accent

Circular checkboxes

Colored checkboxes can be circular. Add the .is-circular class to a .b-checkbox element to make it rounded.

SHOW CODE
4

Switch toggles

Default switches

Switch toggles are available in 4 sizes. No javasccript required.

SHOW CODE

Outlined switches

Switches can be outlined. Add the .is-outlined class to a .switch element to make it outlined.

Thin switches

Switches can be thin. Add the .is-thin class to a .switch element to make it thinner.

Thin outlined switches

Switches can be thin and outlined. Add the .is-outlined and .is-thin classes to a .switch element to make it both thin and outlined.

Regular colors

Add the color modifier to the .switch element. Available classes are default, .is-info, .is-success, .is-warning, .is-danger, .is-primary, .is-secondary and .is-accent

Outlined colors

Add the color modifier to the .switch.is-outlined element. Available classes are default, .is-info, .is-success, .is-warning, .is-danger, .is-primary, .is-secondary and .is-accent

Thin colors

Add the color modifier to the .switch.is-thin element. Available classes are default, .is-info, .is-success, .is-warning, .is-danger, .is-primary, .is-secondary and .is-accent

Thin outlined colors

Add the color modifier to the .switch.is-thin.is-outlined element. Available classes are default, .is-info, .is-success, .is-warning, .is-danger, .is-primary, .is-secondary and .is-accent