FieldGroup

Organize several button-like elements into a group.

Wrap multiple Button within a FieldGroup to group them together.

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

No split

If you use elements with different colors, use the no-split property to disable the display of the separator.

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

Size

Use the size prop to change the size of all the buttons.

size

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

Orientation

Use the orientation prop to change the orientation of the buttons. Defaults to horizontal.

orientation

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

Examples

With input

You can use components like Input, InputMenu, Select SelectMenu, etc. within a field group.

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

You can use a Tooltip within a field group.

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

You can use a DropdownMenu within a field group.

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

With badge

You can use a Badge within a field group.

https://

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

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`size`	`'md'`	`"md" \| "xs" \| "sm" \| "lg" \| "xl" \| "xss"`
`orientation`	`'horizontal'`	`"horizontal" \| "vertical"` The orientation the buttons are laid out.
`noSplit`	`false`	`boolean` Disable show split
`b24ui`		`{}`

Slots

Slot	Type
`default`	`{}`

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    fieldGroup: {
      base: 'relative',
      variants: {
        size: {
          xss: '',
          xs: '',
          sm: '',
          md: '',
          lg: '',
          xl: ''
        },
        orientation: {
          horizontal: 'flex flex-row -space-x-px',
          vertical: 'flex flex-col -space-y-px'
        }
      }
    }
  }
})

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: {
        fieldGroup: {
          base: 'relative',
          variants: {
            size: {
              xss: '',
              xs: '',
              sm: '',
              md: '',
              lg: '',
              xl: ''
            },
            orientation: {
              horizontal: 'flex flex-row -space-x-px',
              vertical: 'flex flex-col -space-y-px'
            }
          }
        }
      }
    })
  ]
})

Countdown

Countdown with options control.

Kbd

A kbd element for indicating a keyboard input.