FieldGroup
Group multiple button-like elements together.
Usage
Wrap multiple Button within a FieldGroup to group them together.
<template>
<UFieldGroup>
<UButton color="neutral" variant="subtle" label="Button" />
<UButton color="neutral" variant="outline" icon="i-lucide-chevron-down" />
</UFieldGroup>
</template>
Size
Use the size prop to change the size of all the buttons.
<template>
<UFieldGroup size="xl">
<UButton color="neutral" variant="subtle" label="Button" />
<UButton color="neutral" variant="outline" icon="i-lucide-chevron-down" />
</UFieldGroup>
</template>
Orientation
Use the orientation prop to change the orientation of the buttons. Defaults to horizontal.
<template>
<UFieldGroup orientation="vertical">
<UButton color="neutral" variant="subtle" label="Submit" />
<UButton color="neutral" variant="outline" label="Cancel" />
</UFieldGroup>
</template>
Examples
With input
You can use components like Input, InputMenu, Select SelectMenu, etc. within a field group.
<template>
<UFieldGroup>
<UInput color="neutral" variant="outline" placeholder="Enter token" />
<UButton color="neutral" variant="subtle" icon="i-lucide-clipboard" />
</UFieldGroup>
</template>
With tooltip
You can use a Tooltip within a field group.
<template>
<UFieldGroup>
<UInput color="neutral" variant="outline" placeholder="Enter token" />
<UTooltip text="Copy to clipboard">
<UButton
color="neutral"
variant="subtle"
icon="i-lucide-clipboard"
/>
</UTooltip>
</UFieldGroup>
</template>
With dropdown
You can use a DropdownMenu within a field group.
<script setup lang="ts">
import type { DropdownMenuItem } from '@nuxt/ui'
const items: 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>
<UFieldGroup>
<UButton color="neutral" variant="subtle" label="Settings" />
<UDropdownMenu :items="items">
<UButton
color="neutral"
variant="outline"
icon="i-lucide-chevron-down"
/>
</UDropdownMenu>
</UFieldGroup>
</template>
With badge
You can use a Badge within a field group.
https://
<template>
<UFieldGroup>
<UBadge color="neutral" variant="outline" size="lg" label="https://" />
<UInput color="neutral" variant="outline" placeholder="www.example.com" />
</UFieldGroup>
</template>
API
Props
| Prop | Default | Type |
|---|---|---|
as |
|
The element or component this component should render as. |
size |
|
|
orientation |
|
The orientation the buttons are laid out. |
ui |
|
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'
}
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/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'
}
}
}
}
})
]
})