Vue FieldGroup Component

Usage

Wrap multiple Button within a FieldGroup to group them together.

<template>
  <B24FieldGroup>
    <B24Button color="air-primary-copilot" label="Button" />
    <B24Button color="air-primary-copilot" label="Button" />
  </B24FieldGroup>
</template>

No split

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

<template>
  <B24FieldGroup no-split>
    <B24Button color="air-primary-copilot" label="Button" />
    <B24Button color="air-primary-success" label="Button" />
    <B24Button color="air-primary-alert" label="Button" />
  </B24FieldGroup>
</template>

Size

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

size

<template>
  <B24FieldGroup size="xl">
    <B24Button color="air-primary-copilot" label="Button" />
    <B24Button color="air-primary-copilot" label="Button" />
  </B24FieldGroup>
</template>

Orientation

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

orientation

<template>
  <B24FieldGroup orientation="vertical">
    <B24Button color="air-primary-copilot" label="Button" />
    <B24Button color="air-primary-copilot" label="Button" />
  </B24FieldGroup>
</template>

Examples

With input

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

<template>
  <B24FieldGroup>
    <B24Input placeholder="Enter token" />

    <B24Button label="Button" />
  </B24FieldGroup>
</template>

You can use a Tooltip within a field group.

<script setup lang="ts">
import MoreMIcon from '@bitrix24/b24icons-vue/outline/MoreMIcon'
</script>

<template>
  <B24FieldGroup>
    <B24Input placeholder="Enter token" />

    <B24Tooltip text="Copy to clipboard">
      <B24Button
        :icon="MoreMIcon"
      />
    </B24Tooltip>
  </B24FieldGroup>
</template>

You can use a DropdownMenu within a field group.

<script setup lang="ts">
import type { DropdownMenuItem } from '@bitrix24/b24ui-nuxt'
import PersonIcon from '@bitrix24/b24icons-vue/main/PersonIcon'
import CreditDebitCardIcon from '@bitrix24/b24icons-vue/main/CreditDebitCardIcon'
import Settings2Icon from '@bitrix24/b24icons-vue/actions/Settings2Icon'
import CirclePlusIcon from '@bitrix24/b24icons-vue/main/CirclePlusIcon'
import MoreMIcon from '@bitrix24/b24icons-vue/outline/MoreMIcon'

const items: DropdownMenuItem[] = [
  {
    label: 'My account',
    avatar: { src: '/b24ui/avatar/employee.png', loading: 'lazy' as const }
  },
  {
    label: 'Profile',
    icon: PersonIcon,
    children: [
      {
        label: 'Billing',
        icon: CreditDebitCardIcon
      },
      {
        label: 'Settings',
        icon: Settings2Icon
      }
    ]
  },
  {
    label: 'New team',
    icon: CirclePlusIcon
  }
]
</script>

<template>
  <B24FieldGroup>
    <B24Button label="Settings" />

    <B24DropdownMenu :items="items" :content="{ align: 'end' }">
      <B24Button
        :icon="MoreMIcon"
      />
    </B24DropdownMenu>
  </B24FieldGroup>
</template>

With badge

You can use a Badge within a field group.

https://

<template>
  <B24FieldGroup>
    <B24Badge size="lg" label="https://" color="air-tertiary" />

    <B24Input placeholder="www.example.com" />
  </B24FieldGroup>
</template>

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`		`{ base?: any; }`

Slots

Slot	Type
`default`	`{}`

Theme

https://github.com/bitrix24/b24ui/tree/main/src/theme/field-group.ts

export default {
  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.