General

FieldGroup

Group related buttons and form elements together with connected borders and shared sizing. Perfect for toolbars, split buttons, and combined input actions.

Playground

Experiment with different props in real-time.

Orientation

Size

Button Variant

Color

Button Count

Basic Usage

Wrap buttons in a FieldGroup to connect them visually.

<script lang="ts">
  import { FieldGroup, Button } from 'sv5ui';
</script>

<FieldGroup>
  <Button variant="outline" label="Left" />
  <Button variant="outline" label="Center" />
  <Button variant="outline" label="Right" />
</FieldGroup>

Orientation

Stack elements horizontally or vertically with the orientation prop.

<!-- Horizontal (default) -->
<FieldGroup orientation="horizontal">
  <Button variant="outline" label="Left" />
  <Button variant="outline" label="Center" />
  <Button variant="outline" label="Right" />
</FieldGroup>

<!-- Vertical -->
<FieldGroup orientation="vertical">
  <Button variant="outline" label="Top" />
  <Button variant="outline" label="Middle" />
  <Button variant="outline" label="Bottom" />
</FieldGroup>

Sizes

The group's size prop controls all child components.

<FieldGroup size="xs">
  <Button variant="outline" label="XS" />
  <Button variant="outline" label="Group" />
</FieldGroup>

<FieldGroup size="sm">
  <Button variant="outline" label="SM" />
  <Button variant="outline" label="Group" />
</FieldGroup>

<FieldGroup size="md">
  <Button variant="outline" label="MD" />
  <Button variant="outline" label="Group" />
</FieldGroup>

<FieldGroup size="lg">
  <Button variant="outline" label="LG" />
  <Button variant="outline" label="Group" />
</FieldGroup>

<FieldGroup size="xl">
  <Button variant="outline" label="XL" />
  <Button variant="outline" label="Group" />
</FieldGroup>

Button Variants

Works with all button variants.

<FieldGroup>
  <Button variant="solid" label="Solid" />
  <Button variant="solid" label="Group" />
</FieldGroup>

<FieldGroup>
  <Button variant="outline" label="Outline" />
  <Button variant="outline" label="Group" />
</FieldGroup>

<FieldGroup>
  <Button variant="soft" label="Soft" />
  <Button variant="soft" label="Group" />
</FieldGroup>

<FieldGroup>
  <Button variant="subtle" label="Subtle" />
  <Button variant="subtle" label="Group" />
</FieldGroup>

<FieldGroup>
  <Button variant="ghost" label="Ghost" />
  <Button variant="ghost" label="Group" />
</FieldGroup>

Colors

Apply different color schemes to grouped buttons.

<FieldGroup>
  <Button variant="outline" color="primary" label="Primary" />
  <Button variant="outline" color="primary" label="Group" />
</FieldGroup>

<FieldGroup>
  <Button variant="outline" color="success" label="Success" />
  <Button variant="outline" color="success" label="Group" />
</FieldGroup>

<FieldGroup>
  <Button variant="outline" color="error" label="Error" />
  <Button variant="outline" color="error" label="Group" />
</FieldGroup>

Icon Groups

Create toolbar-style groups with icon-only buttons.

<!-- Text formatting toolbar -->
<FieldGroup>
  <Button variant="outline" icon="lucide:bold" />
  <Button variant="outline" icon="lucide:italic" />
  <Button variant="outline" icon="lucide:underline" />
  <Button variant="outline" icon="lucide:strikethrough" />
</FieldGroup>

<!-- Text alignment toolbar -->
<FieldGroup>
  <Button variant="outline" icon="lucide:align-left" />
  <Button variant="outline" icon="lucide:align-center" />
  <Button variant="outline" icon="lucide:align-right" />
  <Button variant="outline" icon="lucide:align-justify" />
</FieldGroup>

<!-- Media controls -->
<FieldGroup>
  <Button variant="soft" icon="lucide:skip-back" />
  <Button variant="soft" icon="lucide:play" />
  <Button variant="soft" icon="lucide:skip-forward" />
</FieldGroup>

Mixed Buttons

Combine different button variants and styles within a group.

<!-- Split button: action + dropdown -->
<FieldGroup>
  <Button variant="solid" leadingIcon="lucide:save" label="Save" />
  <Button variant="outline" icon="lucide:chevron-down" />
</FieldGroup>

<!-- Mixed variants in one group -->
<FieldGroup>
  <Button variant="outline" label="Main Action" />
  <Button variant="outline" label="Option A" />
  <Button variant="outline" label="Option B" />
  <Button variant="solid" label="Confirm" />
</FieldGroup>

<!-- Icon + label combination -->
<FieldGroup>
  <Button variant="outline" icon="lucide:minus" />
  <Button variant="outline" label="10" disabled />
  <Button variant="outline" icon="lucide:plus" />
</FieldGroup>

With Input

Combine inputs and buttons in a single connected group.

<script lang="ts">
  import { FieldGroup, Button, Input } from 'sv5ui';
</script>

<!-- Search field with button -->
<FieldGroup>
  <Input placeholder="Search..." leadingIcon="lucide:search" />
  <Button variant="solid" label="Search" />
</FieldGroup>

<!-- URL input with copy -->
<FieldGroup>
  <Input value="https://sv5ui.vercel.app" />
  <Button variant="outline" icon="lucide:copy" />
</FieldGroup>

Custom Element

Use the as prop to render as a different HTML element for semantic markup.

<!-- Render as nav element for semantic HTML -->
<FieldGroup as="nav">
  <Button variant="ghost" label="Home" href="/" />
  <Button variant="ghost" label="About" href="/about" />
  <Button variant="ghost" label="Contact" href="/contact" />
</FieldGroup>

<!-- Render as fieldset -->
<FieldGroup as="fieldset">
  <Button variant="outline" label="Option 1" />
  <Button variant="outline" label="Option 2" />
  <Button variant="outline" label="Option 3" />
</FieldGroup>

UI Slots

Use the ui prop to override classes on internal elements.

Slot	Description
`root`	`Root container element — controls layout, spacing, alignment`

Props

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	`Layout direction of the group`
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	`Size of all child components`
`as`	`keyof HTMLElementTagNameMap`	`'div'`	`HTML element to render as`
`ref`	`HTMLElement \| null`	`null`	`Bindable reference to root DOM element`
`class`	`string`	`-`	`Additional CSS classes on root element`
`ui`	`Record<Slot, Class>`	`-`	`Override slot classes`

Button Icon