Field - Bitrix24 UI

Usage

A field, prop or parameter to display in your content.

name

string required

The description can be set as prop or in the default slot with full markdown support.

::field{name="name" type="string" required}
The `description` can be set as prop or in the default slot with full **markdown** support.
::

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`name`		`string` The name of the field.
`type`		`string` Expected type of the field's value
`description`		`string` Description of the field
`required`		`boolean` Indicate whether the field is required
`b24ui`		`{ root?: ClassNameValue; container?: ClassNameValue; name?: ClassNameValue; wrapper?: ClassNameValue; required?: ClassNameValue; type?: ClassNameValue; description?: ClassNameValue; }`

Slots

Slot	Type
`default`	`{}`

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    prose: {
      field: {
        slots: {
          root: 'my-[20px]',
          container: 'flex items-center gap-3 font-[family-name:var(--ui-font-family-system-mono)] text-(length:--ui-font-size-sm)',
          name: 'font-(--ui-font-weight-semi-bold) text-(--ui-color-accent-main-primary)',
          wrapper: 'flex-1 flex items-center gap-1.5 text-(length:--ui-font-size-xs)',
          required: 'rounded-(--ui-border-radius-sm) bg-(--ui-color-design-outline-alert-content)/10 text-(--ui-color-accent-main-alert) px-1.5 py-0.5',
          type: 'rounded-(--ui-border-radius-sm) bg-(--ui-color-design-tinted-na-bg) text-(--b24ui-typography-description-color) px-1.5 py-0.5',
          description: 'mt-3 text-(--b24ui-typography-description-color) text-(length:--ui-font-size-sm) [&_code]:text-(length:--ui-font-size-xs)/4'
        }
      }
    }
  }
})

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: {
        prose: {
          field: {
            slots: {
              root: 'my-[20px]',
              container: 'flex items-center gap-3 font-[family-name:var(--ui-font-family-system-mono)] text-(length:--ui-font-size-sm)',
              name: 'font-(--ui-font-weight-semi-bold) text-(--ui-color-accent-main-primary)',
              wrapper: 'flex-1 flex items-center gap-1.5 text-(length:--ui-font-size-xs)',
              required: 'rounded-(--ui-border-radius-sm) bg-(--ui-color-design-outline-alert-content)/10 text-(--ui-color-accent-main-alert) px-1.5 py-0.5',
              type: 'rounded-(--ui-border-radius-sm) bg-(--ui-color-design-tinted-na-bg) text-(--b24ui-typography-description-color) px-1.5 py-0.5',
              description: 'mt-3 text-(--b24ui-typography-description-color) text-(length:--ui-font-size-sm) [&_code]:text-(length:--ui-font-size-xs)/4'
            }
          }
        }
      }
    })
  ]
})

Collapsible

Smooth content toggle with expand and collapse effects.

FieldGroup

Combine logically connected fields to create exhaustive API documentation.