Bulma Form Complete Reference

Bulma is a free, open-source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive, minimizing the use of media queries for responsive behavior. It allows us to add our own CSS styling but it is advised to use an external stylesheet over inline styling.

The Form in Bulma contains various classes & components which include the text input, select dropdown, textarea, checkbox, etc. These form controls are used to validate the form fields, along with maintaining consistency in the design.

The list of complete references for the Bulma Form is given below:

Bulma Form

The Bulma framework supports and allows the users to build forms using Bulma form controls. There are various classes used in the form controls and they are discussed below.

Element	Description
Bulma Form field	The Bulma form field is a simple container that contains a label element, a Bulma form control, and an optional help text. The field container maintains consistent spacing between the form fields.
Bulma Form control	This class is used as a versatile block container which consists of input, level, textarea, and select elements.
Bulma Form icons	Bulma provides icon classes to add icons to a form, one can append either has-icons-left or has-icons-right or both modifiers on the form control and is-left and/or is-right modifier(s) on the icon container depending on the modifiers applied on the form control.
Bulma Form addons	Bulma Form has only three addons to be added i.e, inputs, buttons, and dropdown with the field container of form.
Bulma Form group	Bulam form group classes are used to group the form fields together. There are multiple ways to group form field like center, right, or multiline, etc.
Bulma Horizontal form	These classes are used to create forms horizontally (forms are aligned vertically by default). The labels are aligned next to the input fields
Bulma Disabled form	There is no predefined class to disable a form, we can simply use the HTML disabled attribute for that.
Bulma Form Variables	Bulma Form variables are used to customize form labels in their own ways i.e. user can set label colors, weight, and size

Bulma Input

Bulma Input is used for getting text input from the user. The Bulma Input elements are available in different colors, different styles, different sizes, and different states.

Element	Description
Bulma Input Colors	There are different types of classes to set the input color.
Bulma Input Sizes	Bulma Input Size is used to set the size of input fields. There are four different input sizes available in Bulma that are small, medium, normal, and large.
Bulma Input Styles	Bulma Input style is used to set the style on input fields. There is only a single style that is used in an input field. This style is used to create a rounded corner input field.
Bulma Input States	Bulma Input States are used to set the different states of input fields. There are many different states available for input fields that are – normal, hovered, focused, loading, static, disabled, and readonly.
Bulma Input with Font Awesome icons	Bulma Input States are used to set the different states of input fields. There are many different states available for input fields that are – normal, hovered, focused, loading, static, disabled, and readonly.
Bulma Input Variables	Bulma input variables are the SCSS variables that are compiled to CSS, which in turn, are utilized to add styling in various customization options. These variables are declared once to store data that can be reused whenever required.

Bulma Textarea

Textarea is for user input or comments. Bulma textarea elements are available in different colors, different styles, different sizes, and different states.

Element	Description
Bulma Textarea Colors	The Bulma Textarea Color is used to set the border color of textarea element.
Bulma Textarea Sizes	The Bulma Textarea Size is used to set the size of the textarea field. There are four different input sizes available in Bulma that are – small, normal, medium, and large.
Bulma Textarea States	Bulma Textarea States are used to set the different states of Textarea fields. There are many different states available for Textarea fields that are – normal, hovered, focused, loading, disabled, readonly, and fixed size.

Bulma Select

The select element is used to create a drop-down list. Bulma select elements are available in different colors, different styles, different sizes, and different states.

Element	Description
Bulma Multiple select	Bulma multiple select is used to create a style of multiple select dropdown items. The multiple select items are created by using is-multiple modifiers by using the HTML select multiple attributes.
Bulma Select Colors	The Bulma select color is used to set the color on the select element. The color is applied on the border and dropdown icon of the select menu.
Bulma Select Styles	Bulma select style is used to set the style on the select elements. There is only a single style that is used in the select element. This style is used to create a rounded corner on the select element.
Bulma Select Sizes	Bulma Select Size classes are used to set the size of the select dropdown. The select element has 4 different sizes: small, normal, medium, and large.
Bulma Select States	Bulma Select State classes are used to style the select dropdown according to a specific state.
Bulma Select icons	we can add icons to the select dropdown. To add an icon to the select dropdown we can wrap the select container in a control div and use the has-icons-left modifier on the control div.

Bulma Checkbox

The checkboxes allow the users to select multiple options from a list of options. Bulma provides different

Bulma Radio

Radio buttons are mutually exclusive buttons, that is, you can select only one option in a radio button group. The Radio element is a simple wrapper around the radio input. Bulma doesn’t style the radio buttons to ensure cross-browser compatibility. To make sure radio buttons are grouped together, they should have the same name attribute.

Bulma File

The file element is used to upload custom file input. The ‘file’ component comprises of several sub-elements that we have to add exclusively to design our content well.

Element	Description
Bulma File Modifiers	Bulma provides a set of modifiers that use to style file input elements.
Bulma File Colors	There are ten different types of file color classes provided by bulma we can used to set the file colors.
Bulma File Sizes	Bulma provides the different sizes of the File element we can use it. The File element comes in 4 different sizes: small, normal, medium, and large.
Bulma File Alignment	By default, the Bulma file element set to left aligned but bulma provides the classes to set file element to centered or right align.
Bulma File with JavaScript	Bulma doesn’t provide any built in javascript package. We can use JavaScript to make file input more interective.
Bulma File Variables	Bulma file variables are used to customize file inputs in own ways.