VfLayout

Props

Configure the component's behavior and appearance with these props.

Layout

Prop	Default	Description
`label`	—	Whether to render the element's label tag.
`loading`	—	Whether to render loading icon when available.
`addons`	—	Whether to render addons when available.

I18n

Prop	Default	Description
`languages`	—	Whether to render langauges selector when available.

Validation

Prop	Default	Description
`hideErrors`	`false`	Whether to hide validation error messages for this element.

Customization

Prop	Default	Description
`parts`	—	Custom DOM attribute overrides for the component's structural parts.
`class`	—	CSS classes to apply to the component's root element.
`classes`	—	Custom CSS class overrides for the component's structural parts.
`reclass`	—	CSS class overrides that replace (rather than merge with) default classes.
`slots`	—	Custom Vue components to use for named slots. Every component resolves it through the standard outlets pipeline (see `useOutlets`).
`presets`	—	Named configuration presets to apply to the component.
`template`	—	A custom Vue component to use as the template instead of the default.
`component`	—	A custom Vue component to render in the component's default slot.

Context

Reactive properties and methods accessible on the component's Context object.

General

Name	Description
`props`	The resolved component props with defaults applied.

Layout

Name	Description
`classes`	The resolved CSS class map for the component.
`parts`	The resolved DOM attribute overrides for internal elements.
`tokenClass`	A unique CSS class scoped to this component instance, used to target the injected token style rule.
`tokenCss`	The CSS text for scoped token custom properties on this component instance — a base rule plus a browser-resolved dark-mode block, so the text is identical between server and client renders.
`nonce`	Unique security nonce for injecting scoped styles.
`showErrors`	Whether to display validation error messages for this element.
`el$`	The parent element's component context.
`outlets`	Outlets with `template` resolved from the element's `layout` prop when set, otherwise from the standard template/config resolution. A string `layout` is a registered component name and goes through `$security.allowComponents` like any other name string; a rejected one falls back to the standard resolution.
`isContainer`	Whether the element is a container-type element (e.g. group, list).
`isFieldset`	Whether the element should render as a `<fieldset>` with a legend.
`hasPager`	Whether the element's container has an active pager for pagination.
`showLabel`	Whether the element's label is visible.
`showSrLabel`	Whether to render a screen-reader-only label for the element.
`showPhLabel`	Whether to render a placeholder label for horizontal layout alignment.
`showRequired`	Whether to display the required indicator alongside the label.
`columnClasses`	The resolved responsive CSS classes for each column section (container, label, group, wrapper).
`useLabelTag`	Whether to render a `<label>` tag for the element.
`headingTag`	The tag to use for the label when a heading level is set on a container element (e.g. `'h1'`–`'h6'`), or `undefined` when no heading is active.
`showHelp`	Whether the element's help text is visible.
`showDescription`	Whether the element's description text is visible.
`withDefaultProps()`	Merges element-level default props into a target sub-component's props.
`helperClasses()`	Returns the CSS helper class for a given key, if class helpers are enabled.

Events

Name	Description
`fire()`	Fires an event synchronously, invoking before, main, and after listeners in order.
`fireAsync()`	Fires an event asynchronously, awaiting each callback and short-circuiting when any returns `false`.
`on()`	Subscribes a callback to a specific event.
`off()`	Removes a previously registered event callback.
`onBefore()`	Registers a callback that runs before the main event listeners.
`onAfter()`	Registers a callback that runs after the main event listeners.

Events

Events emitted by the component. See Events for details.

Name	Params	Description
`beforeMount`	`context$`	Emitted before the component is mounted.
`mounted`	`context$`	Emitted after the component is mounted.
`beforeUnmount`	`context$`	Emitted before the component is unmounted.
`unmounted`	`context$`	Emitted after the component is unmounted.
`updated`	`context$`	Emitted after the component is updated.

Slots

Named Slots for replacing parts of the component's rendering.

Name	Scope	Description
`template`	`context`	Slot that replaces the entire component rendering. Receives the full component context as a single `context` prop.
`tabs`	`pager` `bindings`	Slot for customizing the tab navigation bar.
`tab`	`index` `label` `meta` `selected` `invalid` `loading` `el$` `bindings`	Slot for customizing an individual tab button.
`default`	—	Slot for the element's default content.

Tokens

All the CSS variables that control this component's appearance with default values in the default theme. See Themes & Tokens for details.

css

:root {
  /**
   * Shared element layout tokens
   * -------------------------------------------------------------------------- */
  --vf-element-line-color: var(--vf-gray-300);

  --vf-label-font-size: 1rem;
  --vf-label-font-weight: 600;
  --vf-label-group-h-padding: calc(var(--vf-py) + var(--vf-border-width-t)) 0 0 0;
  --vf-label-group-v-padding: 0 0 0.375rem 0;

  --vf-required-bg: transparent;
  --vf-required-color: inherit;
  --vf-required-content: '*';
  --vf-required-h: auto;
  --vf-required-icon: none;
  --vf-required-w: auto;

  --vf-help-bg: transparent;
  --vf-help-border-color: transparent;
  --vf-help-border-style: solid;
  --vf-help-border-width: 0;
  --vf-help-color: var(--vf-text-soft);
  --vf-help-font-size: 0.875rem;
  --vf-help-padding: 0;
  --vf-help-radius: var(--vf-radius);

  --vf-description-bg: transparent;
  --vf-description-border-color: transparent;
  --vf-description-border-style: solid;
  --vf-description-border-width: 0;
  --vf-description-color: var(--vf-text-soft);
  --vf-description-font-size: 0.875rem;
  --vf-description-padding: 0;
  --vf-description-radius: var(--vf-radius);

  --vf-errors-bg: transparent;
  --vf-errors-border-color: transparent;
  --vf-errors-border-style: solid;
  --vf-errors-border-width: 0;
  --vf-errors-color: var(--vf-red);
  --vf-errors-font-size: 0.875rem;
  --vf-errors-padding: 0;
  --vf-errors-radius: var(--vf-radius);

  --vf-messages-bg: transparent;
  --vf-messages-border-color: var(--vf-border-success);
  --vf-messages-border-style: solid;
  --vf-messages-border-width: 0;
  --vf-messages-color: var(--vf-green);
  --vf-messages-font-size: 0.875rem;
  --vf-messages-padding: 0;
  --vf-messages-radius: var(--vf-radius);

  --vf-input-border-width-l: var(--vf-border-width-l);

  --vf-icon-font-size: 0.875rem;
  --vf-icon-group-color: inherit;
  --vf-icon-group-color-danger: var(--vf-color-danger);
  --vf-icon-group-width: 2.5rem;

  --vf-element-group-gutter-x: 0;
  --vf-element-group-gutter-y: 0.25rem;
  --vf-element-wrapper-padding: 0;

  /**
   * Semantic tokens
   * -------------------------------------------------------------------------- */
  --vf-icon-height: 0.75rem;
  --vf-icon-width: 0.75rem;

  /**
   * Primitives tokens
   * -------------------------------------------------------------------------- */
  --vf-space-1: 1rem;
  --vf-space-2: 2rem;
  --vf-space-3: 3rem;

  --vf-icon-loading: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.5' fill='none' stroke='currentColor' stroke-width='1.5' stroke-dasharray='30.6 10.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

VfLayout ​

Props ​

Layout ​

I18n ​

Validation ​

Customization ​

Context ​

General ​

Layout ​

Events ​

Events ​

Slots ​

Tokens ​

VfLayout

Props

Layout

I18n

Validation

Customization

Context

General

Layout

Events

Events

Slots

Tokens