FieldGroup

Group multiple button-like elements together.

Usage

Wrap multiple Button within a FieldGroup to group them together.

<template>
  <PFieldGroup>
    <PButton color="neutral" variant="subtle" label="Button" />
    <PButton color="neutral" variant="outline" icon="i-lucide-chevron-down" />
  </PFieldGroup>
</template>

Size

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

size

<template>
  <PFieldGroup size="xl">
    <PButton color="neutral" variant="subtle" label="Button" />
    <PButton color="neutral" variant="outline" icon="i-lucide-chevron-down" />
  </PFieldGroup>
</template>

Orientation

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

orientation

<template>
  <PFieldGroup orientation="vertical">
    <PButton color="neutral" variant="subtle" label="Submit" />
    <PButton color="neutral" variant="outline" label="Cancel" />
  </PFieldGroup>
</template>

Examples

With input

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

<template>
  <PFieldGroup>
    <PInput color="neutral" variant="outline" placeholder="Enter token" />

    <PButton color="neutral" variant="subtle" icon="i-lucide-clipboard" />
  </PFieldGroup>
</template>

You can use a Tooltip within a field group.

<template>
  <PFieldGroup>
    <PInput
      color="neutral"
      variant="outline"
      placeholder="Enter token"
    />

    <PTooltip text="Copy to clipboard">
      <PButton
        color="neutral"
        variant="subtle"
        icon="i-lucide-clipboard"
      />
    </PTooltip>
  </PFieldGroup>
</template>

You can use a DropdownMenu within a field group.

<script setup lang="ts">
import type { DropdownMenuItem } from 'pohon-ui';

const items: Array<DropdownMenuItem> = [
  {
    label: 'Team',
    icon: 'i-lucide-users',
  },
  {
    label: 'Invite users',
    icon: 'i-lucide-user-plus',
    children: [
      {
        label: 'Invite by email',
        icon: 'i-lucide-send-horizontal',
      },
      {
        label: 'Invite by link',
        icon: 'i-lucide-link',
      },
    ],
  },
  {
    label: 'New team',
    icon: 'i-lucide-plus',
  },
];
</script>

<template>
  <PFieldGroup>
    <PButton
      color="neutral"
      variant="subtle"
      label="Settings"
    />

    <PDropdownMenu :items="items">
      <PButton
        color="neutral"
        variant="outline"
        icon="i-lucide-chevron-down"
      />
    </PDropdownMenu>
  </PFieldGroup>
</template>

With badge

You can use a Badge within a field group.

https://

<template>
  <PFieldGroup>
    <PBadge
      color="neutral"
      variant="outline"
      size="lg"
      label="https://"
    />

    <PInput
      color="neutral"
      variant="outline"
      placeholder="www.example.com"
    />
  </PFieldGroup>
</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"`
`orientation`	`'horizontal'`	`"horizontal" \| "vertical"` The orientation the buttons are laid out.
`ui`		`{ base?: any; }`

Slots

Slot	Type
`default`	`{}`

Theme

app.config.ts

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

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from 'pohon-ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        fieldGroup: {
          base: 'relative',
          variants: {
            size: {
              xs: '',
              sm: '',
              md: '',
              lg: '',
              xl: ''
            },
            orientation: {
              horizontal: 'inline-flex -space-x-px',
              vertical: 'flex flex-col -space-y-px'
            }
          },
          defaultVariants: {
            size: 'md'
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

Collapsible

A collapsible element to toggle visibility of its content.

Icon

A component to display any icon from Iconify or another component.