Input Group

Input groups combine multiple inline fields (Input, Textarea, Select, Datepicker, Button) into one control with a shared label and footer.

#
Usage

Basic example with common props.

Phone number

Country code and local number

Helper text here

Mixing inputs, selects, and buttons in one group.

Distance

Shared validation and footer messaging.

Name	Description	Type	Default	Values
size	Control size. One of xs, sm, md, lg, xl.	String	md	xssmmdlgxl
disabled	Disables interaction and applies disabled styling.	Boolean	false
loading	Shows a loading indicator and blocks interaction.	Boolean	false
loadingLabel	Accessible label announced while loading.	String
loadingStatus	Loader visual status (for example active or indeterminate).	String	active
modelValue	Bound value (v-model).	String Number Boolean Object Array
id	Native id attribute for the input element.	String
name	Native name attribute for form submission.	String
readonly	Makes the field read-only without disabling it.	Boolean	false
required	Marks the field as required for validation.	Boolean	false
validateOnInput	Runs validation on each input event when true.	Boolean	true
label	Visible label text for the field.	String
helper	Helper text shown below the field.	String
error	External error message; overrides rule errors when set.	String
hideFooter	Hides the footer area (helper / error).	Boolean	false
rules	Validation rule functions or rule descriptors.	Array	() => []
tooltip	Optional tooltip text next to the label.	String
skipFormRegistry	Skips registering this field with a parent x-form.	Boolean	false
block	Stretches the group to the full width of the parent.	Boolean	false

Name	Description
default	Grouped controls (inputs, buttons, or other adornments).

Name	Description
update:modelValue	Emitted when the bound value changes (v-model).
blur	Emitted when the field loses focus.
focus	Emitted when the field receives focus.
input	Emitted on native input events.
change	Emitted when the value is committed (change).

Name	Description
focus	Focus the underlying control.
blur	Remove focus from the underlying control.
reset	Reset the field value and validation state.
validate	Run validation rules and return whether the field is valid.
setError	Set an external error message on the field.