Input

Use bo-input for single-line values with optional labels, helper text, icons, and validation states.

Usage

Email

<bo-input label="Email" placeholder="you@example.com" />

Description and validation

Use description for supporting text and error with state="invalid" for failed validation.

Username

Choose a public name.

Invite code

Code not found.

<div class="grid gap-3">
  <bo-input label="Username" description="Choose a public name." />
  <bo-input label="Invite code" state="invalid" error="Code not found." />
</div>

Types

The type prop maps to the native input type. reveal-password adds a password visibility control.

Email

Password

<div class="grid gap-3">
  <bo-input label="Email" type="email" />
  <bo-input v-model="password" label="Password" type="password" reveal-password />
</div>

API

Prop / event / slot	Type	Default	Description
id / dataTestId	string	autogenerated	Input attributes.
modelValue	string	''	Value used by v-model.
type	native input type	text	Input value type.
label / description	string	-	Visible label and supporting text.
placeholder / name	string	-	Empty hint and native form name.
state	default | valid | invalid	default	Validation appearance.
error / hint	string	-	Validation or supporting text. description takes precedence over hint.
required / disabled / readOnly / autofocus	boolean	false	Native input states.
prefixIcon / suffixIcon	Icon	-	Icons inside the input.
revealPassword	boolean	false	Shows a password visibility toggle when a value exists.
fullWidth	boolean	false	Fills the available width.
role / ariaLabel / ariaDescribedBy / ariaInvalid	native accessibility types	textbox / -	Input semantics; description and error are wired automatically unless overridden.
update:modelValue	event	-	Emitted when the value changes.
focus / blur / change	native component events	-	Emitted from the native input.
prefixIconClick / suffixIconClick	event	-	Emitted when an icon container is clicked.
default / topRightContent	slot	-	Additional content and content beside the label.
focus	exposed method	-	Focuses the native input.