Group
A generic container for visually connecting elements like inputs, buttons, and badges with a GroupAddon subcomponent for decorative prefixes/suffixes.
Input Group
@
https://
$
USD
Badge Group
ReactTypeScriptTailwind
12 errors
API Reference
GroupRoot
Container component that visually connects child elements by collapsing borders and rounding only outer corners.
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | 'horizontal' | 'vertical' | 'horizontal' | Layout direction of the grouped elements |
| className | string | - | Additional CSS classes for the container |
| ...props | React.ComponentProps<"div"> | - | Standard div element props |
GroupAddon
Decorative element for displaying icons or text prefixes/suffixes within a Group.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'primary' | 'secondary' | 'destructive' | 'ghost' | 'ghost' | Visual style variant of the addon |
| className | string | - | Additional CSS classes for the addon |
| ...props | React.ComponentProps<"div"> | - | Standard div element props |
Accessibility
Accessibility features built into the Group component.
| Prop | Type | Description |
|---|---|---|
| role="group" | attribute | The Group container renders with role="group" for semantic grouping of related elements |