FormField

A container for form elements with built-in validation and error management.

Wrap any form component with a FormField. Used in a Form, it provides validation and error handling.

Label

Use the label prop to set the label for the form control.

label

{
  "wait": "Loading client-side content..."
}

The label for attribute and the form control are associated with a unique id if not provided.

When using the required prop, an asterisk is added next to the label.

required

{
  "wait": "Loading client-side content..."
}

Description

Use the description prop to provide additional information below the label.

description

We'll never share your email with anyone else.

{
  "wait": "Loading client-side content..."
}

Hint

Use the hint prop to display a hint message next to the label.

hint

EmailOptional

{
  "wait": "Loading client-side content..."
}

Help

Use the help prop to display a help message below the form control.

help

Please enter a valid email address.

{
  "wait": "Loading client-side content..."
}

Error

Use the error prop to display an error message below the form control. When used together with the help prop, the error prop takes precedence.

When used inside a Form, this is automatically set when a validation error occurs.

error

Please enter a valid email address.

{
  "wait": "Loading client-side content..."
}

Size

Use the size prop to change the size of the FormField, the size is proxied to the form control.

size

EmailOptional

We'll never share your email with anyone else.

Please enter a valid email address.

{
  "wait": "Loading client-side content..."
}

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`name`		`string` The name of the FormField. Also used to match form errors.
`errorPattern`		`RegExp` A regular expression to match form error names.
`label`		`string`
`description`		`string`
`help`		`string`
`error`		`string \| false \| true`
`hint`		`string`
`size`	`'md'`	`"md" \| "xs" \| "sm" \| "lg"`
`required`	`false`	`boolean`
`eagerValidation`		`boolean` If true, validation on input will be active immediately instead of waiting for a blur event.
`validateOnInputDelay`	`300`	`number` Delay in milliseconds before validating the form on input events.
`b24ui`		`{ root?: ClassNameValue; wrapper?: ClassNameValue; labelWrapper?: ClassNameValue; label?: ClassNameValue; hint?: ClassNameValue; container?: ClassNameValue; description?: ClassNameValue; error?: ClassNameValue; errorWrapper?: ClassNameValue; errorIcon?: ClassNameValue; help?: ClassNameValue; }`

Slots

Slot	Type
`label`	`{ label?: string \| undefined; }`
`hint`	`{ hint?: string \| undefined; }`
`description`	`{ description?: string \| undefined; }`
`help`	`{ help?: string \| undefined; }`
`error`	`{ error?: string \| boolean \| undefined; }`
`default`	`{ error?: string \| boolean \| undefined; }`

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    formField: {
      slots: {
        root: 'font-[family-name:var(--ui-font-family-system)] font-(--ui-font-weight-regular)',
        wrapper: 'leading-(--ui-font-line-height-reset)',
        labelWrapper: 'flex content-center items-center justify-between',
        label: 'block text-(--b24ui-typography-label-color)',
        hint: 'text-(--b24ui-typography-description-color)',
        container: 'relative',
        description: 'mt-[2px] leading-(--ui-font-line-height-2xs) text-(--b24ui-typography-description-color)',
        error: 'mt-[4px] text-(--ui-color-accent-main-alert)',
        errorWrapper: 'flex flex-row flex-nowrap items-center gap-0.5',
        errorIcon: 'size-[18px] mt-[2px]',
        help: 'mt-[6px] leading-(--ui-font-line-height-2xs) italic text-(--b24ui-typography-description-color)'
      },
      variants: {
        useDescription: {
          true: {
            wrapper: 'mb-[6px]'
          },
          false: {
            wrapper: 'mb-[10px]'
          }
        },
        size: {
          xs: {
            root: 'text-(length:--ui-font-size-xs)',
            errorIcon: 'size-[16px]'
          },
          sm: {
            root: 'text-(length:--ui-font-size-xs)',
            errorIcon: 'size-[16px]'
          },
          md: {
            root: 'text-(length:--ui-font-size-sm)',
            errorIcon: 'size-[18px]'
          },
          lg: {
            root: 'text-(length:--ui-font-size-md)'
          }
        },
        required: {
          true: {
            label: "after:content-['*'] after:ms-0.5 after:text-(--ui-color-accent-main-alert)"
          }
        }
      },
      compoundVariants: [],
      defaultVariants: {
        size: 'md'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        formField: {
          slots: {
            root: 'font-[family-name:var(--ui-font-family-system)] font-(--ui-font-weight-regular)',
            wrapper: 'leading-(--ui-font-line-height-reset)',
            labelWrapper: 'flex content-center items-center justify-between',
            label: 'block text-(--b24ui-typography-label-color)',
            hint: 'text-(--b24ui-typography-description-color)',
            container: 'relative',
            description: 'mt-[2px] leading-(--ui-font-line-height-2xs) text-(--b24ui-typography-description-color)',
            error: 'mt-[4px] text-(--ui-color-accent-main-alert)',
            errorWrapper: 'flex flex-row flex-nowrap items-center gap-0.5',
            errorIcon: 'size-[18px] mt-[2px]',
            help: 'mt-[6px] leading-(--ui-font-line-height-2xs) italic text-(--b24ui-typography-description-color)'
          },
          variants: {
            useDescription: {
              true: {
                wrapper: 'mb-[6px]'
              },
              false: {
                wrapper: 'mb-[10px]'
              }
            },
            size: {
              xs: {
                root: 'text-(length:--ui-font-size-xs)',
                errorIcon: 'size-[16px]'
              },
              sm: {
                root: 'text-(length:--ui-font-size-xs)',
                errorIcon: 'size-[16px]'
              },
              md: {
                root: 'text-(length:--ui-font-size-sm)',
                errorIcon: 'size-[18px]'
              },
              lg: {
                root: 'text-(length:--ui-font-size-md)'
              }
            },
            required: {
              true: {
                label: "after:content-['*'] after:ms-0.5 after:text-(--ui-color-accent-main-alert)"
              }
            }
          },
          compoundVariants: [],
          defaultVariants: {
            size: 'md'
          }
        }
      }
    })
  ]
})

Slots

Slot	Type
`label`	`{ label?: string \| undefined; }`
`hint`	`{ hint?: string \| undefined; }`
`description`	`{ description?: string \| undefined; }`
`help`	`{ help?: string \| undefined; }`
`error`	`{ error?: string \| boolean \| undefined; }`
`default`	`{ error?: string \| boolean \| undefined; }`

Form

A form component designed for validation and handling submissions.

Input

An input box designed for text entry.