Forms and fields
Bulma provides a number of form elements that you can use to create forms. And fields of form inputs to group them together.
Recommendations and use
The BulmaControl is used to wrap single form inputs or elements you'd like to place within a BulmaFormControlGroup.
The BulmaControlGroup is used to wrap multiple BulmaControl components to group them together. It may also be used to insert multiple controls within a single BulmaFormField.
The BulmaFormField is to display a label, help text, and a single BulmaControl or BulmaControlGroup together.
vbFormControl
Bulma documentationSource code
A form input container to provide a consistent spacing and styling of form inputs elements.
Slots
default
The form input to be enhanced.
Props
tag
Type: string | undefined
The HTML tag to use for the form control.
isExpanded
Requires Control Group parent and sibling control elements
Type: boolean | undefined
Whether the form control and input should take up the full width of its parent control group.
leftIcon
Recommended to not colour icons
Type: string | BulmaColouredIcon | BulmaMultiIcon | undefined
The icon to display on the left side of the form control.
rightIcon
Recommended to not colour icons
Type: string | BulmaColouredIcon | BulmaMultiIcon | undefined
The icon to display on the right side of the form control.
vbFormControlGroup
A container to group BulmaFormControls together.
Slots
default
The form controls to be grouped together.
Props
hasAddons
Type: boolean | undefined
Whether the form controls should be grouped together as addons; appearing as a single input, each control connected to the next.
alignment
Type: BulmaAlignment | undefined
The alignment of the form controls within the group.
isMultiline
Type: boolean | undefined
Whether the form controls should be displayed on multiple lines.
has no effect if used with hasAddons
vbFormField
Bulma documentationSource code
A simple container for a single whole form input; built for an optional label and help text, and form control( s) (BulmaFormControlGroup or BulmaFormControl).
Slots
default
The single form control or form control group
Props
label
Type: string | undefined
The label for the form field.
help
Type: string | undefined
The help text for the form field.
tag
Type: string | undefined
Default: div
isHorizontal
Type: boolean | undefined
Displays the form field horizontally
labelSize
Type: BulmaSize | undefined
The size of the label. Should correspond to the size of the form control(s).
labelFor
Type: string | undefined
The id of the form control(s) to associate the label with. Necessary for accessibility with isHorizontal as the input is not a direct child of the label.