Skip to content

Form Widget

The form widget coordinates the input from a collection of input widgets. It provides a button to submit the form.

Form Widget

Input widgets can designate a form name. When the corresponding form is then submitted, the form widget will gather the input values and submit them to the widget action.

Configurable components

Class NameDescription
cardBackground card component
primaryPrimary form component

Widget Properties

NameDescription
formName of the form. Use this name in the input widgets to specify the form
textText to display in the form button. Defaults to "Save"
validateRegular expression to validate the form input

Common CSS Properties

CSS PropertyDescription
primary.font-sizeFont size of the form text. Scales by default according to the widget size
primary.font-weightFont weight of the form text. Defaults to bold
button.colorColor of the form text
button.backgroundBackground color of the form button. Defaults to accent

Vuetify CSS Properties

Set these CSS properties to modify the underlying Vuetify button component.

NameDescriptionExample

button.--w-variant | Set to elevated, flat, tonal, outlined, text or plain button.--w-block | Set to true to make the button full width button.--w-density | Set to compact, default or comfortable button.--w-ripple | Set to enable the ripple effect