Form components provide comprehensive input functionality with built-in validation, styling, and accessibility features based on Bulma form classes.
Text input component supporting various input types with validation and customization options.
export const BInput: Component<{
modelValue?: string | number;
type?: 'text' | 'password' | 'email' | 'tel' | 'url' | 'search' | 'number' | 'textarea';
placeholder?: string;
size?: 'is-small' | 'is-medium' | 'is-large';
expanded?: boolean;
passwordReveal?: boolean;
loading?: boolean;
disabled?: boolean;
readonly?: boolean;
maxlength?: number | string;
autocomplete?: string;
lazy?: boolean;
customClass?: string;
hasCounter?: boolean;
statusIcon?: boolean;
}>;Usage example:
import { BInput } from "buefy";
// Basic text input
<BInput v-model="name" placeholder="Enter your name" />
// Password input with reveal
<BInput
v-model="password"
type="password"
:password-reveal="true"
/>
// Textarea with counter
<BInput
v-model="description"
type="textarea"
:maxlength="200"
:has-counter="true"
/>Button component with various styles, states, and icon support.
export const BButton: Component<{
label?: string;
type?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' |
'is-ghost' | 'is-primary' | 'is-link' | 'is-info' | 'is-success' |
'is-warning' | 'is-danger';
size?: 'is-small' | 'is-normal' | 'is-medium' | 'is-large';
loading?: boolean;
disabled?: boolean;
expanded?: boolean;
rounded?: boolean;
outlined?: boolean;
inverted?: boolean;
focused?: boolean;
active?: boolean;
hovered?: boolean;
selected?: boolean;
iconLeft?: string;
iconRight?: string;
iconPack?: string;
nativeType?: 'button' | 'submit' | 'reset';
tag?: string | Component;
}>;Usage example:
import { BButton } from "buefy";
// Primary button with icon
<BButton
type="is-primary"
icon-left="account"
@click="handleLogin"
>
Login
</BButton>
// Loading state
<BButton :loading="isSubmitting" type="is-success">
Submit
</BButton>Field wrapper component for form layout and validation message display.
export const BField: Component<{
type?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' |
'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
label?: string;
labelFor?: string;
message?: string | string[];
grouped?: boolean;
groupMultiline?: boolean;
position?: 'is-centered' | 'is-right';
expanded?: boolean;
addons?: boolean;
horizontal?: boolean;
customClass?: string;
}>;Usage example:
import { BField, BInput } from "buefy";
// Basic field with label
<BField label="Username">
<BInput v-model="username" />
</BField>
// Field with validation message
<BField
label="Email"
:type="hasError ? 'is-danger' : ''"
:message="errorMessage"
>
<BInput v-model="email" type="email" />
</BField>
// Grouped fields
<BField grouped>
<BField label="First Name" expanded>
<BInput v-model="firstName" />
</BField>
<BField label="Last Name" expanded>
<BInput v-model="lastName" />
</BField>
</BField>Checkbox input component with tri-state support and custom styling.
export const BCheckbox: Component<{
modelValue?: boolean | string | number | any[];
nativeValue?: string | number | boolean;
trueValue?: any;
falseValue?: any;
disabled?: boolean;
required?: boolean;
name?: string;
size?: 'is-small' | 'is-medium' | 'is-large';
type?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' |
'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
indeterminate?: boolean;
}>;
export const BCheckboxButton: Component<{
modelValue?: boolean | string | number | any[];
nativeValue?: string | number | boolean;
trueValue?: any;
falseValue?: any;
disabled?: boolean;
required?: boolean;
name?: string;
size?: 'is-small' | 'is-medium' | 'is-large';
type?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' |
'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
expanded?: boolean;
}>;Usage example:
import { BCheckbox } from "buefy";
// Basic checkbox
<BCheckbox v-model="agreed">
I agree to the terms
</BCheckbox>
// Checkbox group
<BCheckbox
v-model="selectedOptions"
native-value="option1"
>
Option 1
</BCheckbox>
<BCheckbox
v-model="selectedOptions"
native-value="option2"
>
Option 2
</BCheckbox>Radio button component for single selection from multiple options.
export const BRadio: Component<{
modelValue?: string | number | boolean;
nativeValue?: string | number | boolean;
disabled?: boolean;
required?: boolean;
name?: string;
size?: 'is-small' | 'is-medium' | 'is-large';
type?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' |
'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
}>;
export const BRadioButton: Component<{
modelValue?: string | number | boolean;
nativeValue?: string | number | boolean;
disabled?: boolean;
required?: boolean;
name?: string;
size?: 'is-small' | 'is-medium' | 'is-large';
type?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' |
'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
expanded?: boolean;
}>;Usage example:
import { BRadio } from "buefy";
// Radio group
<BRadio v-model="selectedPlan" native-value="basic">
Basic Plan
</BRadio>
<BRadio v-model="selectedPlan" native-value="premium">
Premium Plan
</BRadio>Select dropdown component with single and multiple selection support.
export const BSelect: Component<{
modelValue?: any;
placeholder?: string;
multiple?: boolean;
nativeSize?: number;
size?: 'is-small' | 'is-medium' | 'is-large';
expanded?: boolean;
loading?: boolean;
disabled?: boolean;
required?: boolean;
name?: string;
icon?: string;
iconPack?: string;
autocomplete?: string;
maxHeight?: string | number;
}>;Usage example:
import { BSelect } from "buefy";
// Basic select
<BSelect v-model="selectedCountry" placeholder="Select country">
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="mx">Mexico</option>
</BSelect>
// Multiple select
<BSelect v-model="selectedTags" multiple>
<option value="vue">Vue.js</option>
<option value="react">React</option>
<option value="angular">Angular</option>
</BSelect>Toggle switch component for boolean values with customizable styling.
export const BSwitch: Component<{
modelValue?: boolean | string | number;
nativeValue?: string | number | boolean;
trueValue?: any;
falseValue?: any;
disabled?: boolean;
required?: boolean;
name?: string;
size?: 'is-small' | 'is-medium' | 'is-large';
type?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' |
'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
rounded?: boolean;
outlined?: boolean;
leftLabel?: boolean;
passiveType?: string;
}>;Usage example:
import { BSwitch } from "buefy";
// Basic switch
<BSwitch v-model="notificationsEnabled">
Enable notifications
</BSwitch>
// Styled switch
<BSwitch
v-model="darkMode"
type="is-success"
:rounded="true"
>
Dark Mode
</BSwitch>All form components emit standard Vue events:
// Common events for all form inputs
interface FormEvents {
'update:modelValue': (value: any) => void;
'input': (value: any) => void;
'change': (value: any) => void;
'focus': (event: FocusEvent) => void;
'blur': (event: FocusEvent) => void;
}
// Button-specific events
interface ButtonEvents {
'click': (event: MouseEvent) => void;
}Form components integrate with Vue's validation patterns and can display validation states:
// Example with validation
<BField
label="Email"
:type="$v.email.$error ? 'is-danger' : ''"
:message="$v.email.$error ? 'Invalid email' : ''"
>
<BInput
v-model="email"
type="email"
@blur="$v.email.$touch()"
/>
</BField>