Form

Use bo-form as the form element and bo-form-field to group a label, description, control, and error.

Usage

Email *

Use your work address.

Not submitted

<bo-form @submit.prevent="submitted = true">
  <bo-form-field v-slot="{ id, ariaDescribedBy, ariaInvalid }" label="Email" description="Use your work address." required>
    <bo-input :id="id" :aria-described-by="ariaDescribedBy" :aria-invalid="ariaInvalid" v-model="email" type="email" />
  </bo-form-field>
  <bo-button class="mt-4" type="submit">Save</bo-button>
</bo-form>

Error state

Pass the validation message to error on the field.

Password *

Use at least 8 characters.

<bo-form-field v-slot="{ id, ariaDescribedBy, ariaInvalid }" label="Password" error="Use at least 8 characters." required>
  <bo-input :id="id" :aria-described-by="ariaDescribedBy" :aria-invalid="ariaInvalid" type="password" />
</bo-form-field>

API

Component / prop / event / slot	Type	Default	Description
BoForm	component	-	Native form wrapper.
id / dataTestId	string	autogenerated	Form attributes.
ariaLabel	string	-	Accessible form name.
novalidate	boolean	false	Disables the browser's native validation UI.
submit	(event: SubmitEvent) event	-	Emitted on submit.
reset	(event: Event) event	-	Emitted when the form resets.
default	slot	-	Form fields and actions.
BoFormField	component	-	Groups field content and its messages.
id / dataTestId	string	autogenerated	Field attributes and generated control prefix.
label / description / error	string	-	Field label, supporting text, and validation message.
required / disabled	boolean	false	Field state flags.
default	scoped slot	{ id, ariaDescribedBy, ariaInvalid }	Bind these values to the field control.