Builder
Examples
Case Studies
News
Resources
Ecosystem
Appearance
Star
Menu
On this page

FormTab ​

Renders a form tab in FormTabs component.

Basic Usage ​

<FormTab> component can be used in <FormTabs> component:

vue
<template>
  <Vueform>
    <template #empty>
      <FormTabs>
        <FormTab
          name="account"
          label="Account"
          :elements="['email', 'password']"
        />
        <FormTab
          name="personal"
          label="Personal"
          :elements="['name', 'bio']"
        />
        <FormTab
          name="social"
          label="Social"
          :elements="['facebook', 'twitter']"
        />
      </FormTabs>

      <FormElements>
        <TextElement
          name="email"
          label="Email"
        />
        <TextElement
          input-type="password"
          name="password"
          label="Password"
        />
        <TextElement
          name="name"
          label="Name"
        />
        <TextareaElement
          name="bio"
          label="bio"
        />
        <TextElement
          name="facebook"
          label="Facebook"
        />
        <TextElement
          name="twitter"
          label="Twitter"
        />
      </FormElements>
    </template>
  </Vueform>
</template>

Configuration options can be passed over as regular component props. Check out Options section for available configuration options.

Options ​

Find below the list of options that can use to configure FormTab component. Options can be passed to the component via props.

elements ​

  • Type: array
  • Default: []
vue
<FormTab :elements="['name', 'email', 'password']" ... />

The names of highest level form elements the tab should contain.

name ​

  • Type: string|number
  • Required: true
vue
<FormTab name="gallery" ... />

The name of the tab.

label ​

  • Type: string|object|function
template
<!-- Using string/HTML --->
<FormTab label="Gallery" ... />

<!-- Using component --->
<FormTab :label="{ template: '<span>Gallery</span>' }" ... />

<!-- Using function --->
<FormTab name="gallery" :label="step$ => _.upperFirst(step$.name)" />

The tab's label. Can be defined as a string, a Vue component object with a render function or as a function that receives tab$ as its first a param.

Can also be defined via #default slot.

conditions ​

  • Type: array
  • Default: []
template
<FormTabs>
  <FormTab label="First" ... />
  <FormTab label="Second" :conditions="[['checkbox', true]]" ... />
  <FormTab label="Third" ... />
</FormTabs>

<!-- ... --->

<CheckboxElement name="checkbox" text="Check me" ... />

Shows or hides the tab based on the provided conditions. If any of the the conditions is unfulfilled the tab will be hidden.

Conditions can be provided as an array, where each item has to be either an array or a function.

If a condition is provided as an array, the first value must be the path of an element which value should be watched. The second is an operator that should define the type of comparison. The third is the expected value of the element.

vue
<FormTab :conditions="[['element', '==', 'expected_value']]" ... />

Hint: In case you want to check for equality you might leave the operator and pass the expected value as the second param:

vue
<FormTab :conditions="[['element', 'expected_value']]" ... />

Available operators:

  • == - expect equality
  • != - expect inequality
  • > - expect the other element's value(s) to be higher
  • >=- expect the other element's value(s) to be higher or equal
  • < - expect the other element's value(s) to be lower
  • <= - expect the other element's value(s) to be lower or equal
  • ^ - expect the other element's value to start with
  • $ - expect the other element's value to end with
  • * - expect the other element's value to contain
  • in - expect to be among an array of values
  • not_in - expect not to be among an array of values
  • today - expect to be today
  • before - expect to be before a date (value can be a YYYY-MM-DD date string or today)
  • after - expect to be after a date (value can be a YYYY-MM-DD date string or today)

The expected value can also be defined as an array in which case any of its values will fulfill the condition.

Conditions can be defined with OR relation or as function. Learn more about conditions here.

view ​

  • Type: string
vue
<FormTab view="alt" ... />

The name of the view to be used for the component. If undefined the default view will be used.

Learn more about views here.

addClass ​

  • Type: array|object|string
vue
<FormTab :add-class="{
  classname: 'class-value',
  classname: ['class-value'],
  classname: [{'class-value': true}],
}" ... />

Adds classes to any of FormTab component's class names. Classes can have string or array values. When Vue style classes are used object values must be wrapped in an array.

Conditional classes can be passed as a function with form$ param, eg.:

vue
<FormTab :add-class="(form$) => ({
  classname: [
    { 'class-value': form$.el$('other_field')?.value === 'some_value' }
  ],
})" ... />

Learn more about adding classes here.

removeClass ​

  • Type: array|object
vue
<FormTab :remove-class="{
  classname: ['class-value-1', 'class-value-2']
}" ... />

Removes classes from any of FormTab component's class names. The classes to be removed must be listed in an array.

Conditional classes can be passed as a function with form$ param, eg.:

vue
<FormTab :remove-class="(form$) => ({
  classname: form$.el$('other_field')?.value === 'some_value'
    ? ['class-value-1', 'class-value-2']
    : [],
})" ... />

Learn more about removing classes here.

replaceClass ​

  • Type: object
vue
<FormTabElement :replace-class="{
  classname: {
    'from-class': 'to-class',
    'from-class': ['to-class'],
    'from-class': [{'to-class': true}],
  }
}" ... />

Replaces the classes of any class names of FormTab component. The keys are the original class names and the values are the replacements. The keys can only be single classes, while values can contain multiple ones in string or an array. When Vue style classes are used object values must be wrapped in an array.

Conditional classes can be passed as a function with form$ param, eg.:

vue
<FormTab :replace-class="(form$) => ({
  classname: form$.el$('other_field')?.value === 'some_value' ? {
    'from-class': 'to-class'
  } : {},
})" ... />

Learn more about replacing classes here.

overrideClass ​

  • Type: array|object|string
vue
<FormTab :override-classes="{
  ComponentName: {
    classname: 'class-value',
    classname: ['class-value'],
    classname: [{'class-value': true}],
  }
}" ... />

Overrides the classes of any of FormTab component's class names. The classes can have string or array values. When Vue style classes are used object values must be wrapped in an array.

Conditional classes can be passed as a function with form$ param, eg.:

vue
<FormTab :override-class="(form$) => (form$.el$('other_field')?.value === 'some_value' ? {
  classname: 'class-value'
} : {})" ... />

Learn more about overriding classes here.

Properties ​

All the data, computed and inject properties of the component.

tab$ ​

  • Type: FormTab
  • Group: computed

The tab's component.

tabLabel ​

  • Type: string|Component
  • Default: null
  • Group: data

The label of the tab.

index ​

  • Type: number
  • Group: computed

Index of this tab among the other tabs which are not hidden by unmet conditions.

isFirst ​

  • Type: boolean
  • Group: computed

Whether the tab is the first.

isLast ​

  • Type: boolean
  • Group: computed

Whether the tab is the first.

active ​

  • Type: boolean
  • Default: false
  • Group: data

Whether the tab is active.

elements$ ​

  • Type: object
  • Group: computed

The components of highest level form elements.

tabs$ ​

  • Type: FormTabs
  • Group: computed

The parent FormTabs component.

children$ ​

  • Type: object
  • Group: computed

The components of form elements within the tab.

invalid ​

  • Type: boolean
  • Group: computed

Whether the tab has any invalid elements.

available ​

  • Type: boolean
  • Group: computed

Whether no conditions are defined or they are all fulfilled.

visible ​

  • Type: boolean
  • Group: computed

Whether the tab should be visible.

Size ​

  • Type: string
  • Group: inject

The size of the component.

View ​

  • Type: string
  • Group: computed

The name of the resolved view for the component. This one should be used to determine the component's view in class functions.

template ​

  • Type: object
  • Group: computed

The component's template.

classes ​

  • Type: object
  • Group: computed

The component's classes.

theme ​

  • Type: object
  • Group: inject

The global theme object, which contains all the default templates and classes.

form$ ​

  • Type: Vueform
  • Group: inject

The root form's component.

Methods ​

The methods of the component.

select ​

  • Returns: void

Deactivate all other tabs and set the current one as active.

on ​

  • Arguments:
    • {string} event* - name of the event to listen for
    • {function} callback* - callback to run when the event is triggered
  • Returns: void

Adds a listener for an event.

off ​

  • Arguments:
    • {string} event* - name of the event to remove
  • Returns: void

Removes all listeners for an event.

fire ​

  • Arguments:
    • {any} args - list of arguments to pass over to the event callback
  • Returns: void

Fires and emits an event.

activate ​

  • Returns: void

Activate the tab.

deactivate ​

  • Returns: void

Deactivate the tab.

Events ​

Events emitted by the component. You can subscribe to them using regular @{eventName} listener in inline components or by using on(event, callback) method.

activate ​

Triggered when the tab becomes active.

inactivate ​

Triggered when the tab becomes inactive.

Slots ​

The slots of the component.

default ​

Renders the label for the tab.

FormTabsFormLanguages
👋 Hire Vueform team for form customizations and developmentLearn more