Group

<Group>
  <InputGroup>
    <Input aria-label="Email" placeholder="you@example.com" />
  </InputGroup>
  <Button>Subscribe</Button>
</Group>

Installation

pnpm dlx shadcn@latest add @dotui/group

Usage

import { Button } from "@/components/ui/button"
import { Group } from "@/components/ui/group"

<Group>
  <Button>One</Button>
  <Button>Two</Button>
</Group>

Anatomy

Group is the container; GroupText renders an inline text segment between controls (prefixes, suffixes, labels).

import { Button } from "@/components/ui/button"
import { Group, GroupText } from "@/components/ui/group"

<Group>
  <GroupText>Label</GroupText>
  <Button>Action</Button>
</Group>

Set orientation to "vertical" to stack children instead of the default "horizontal" row.

isDisabled, isInvalid and isReadOnly set data attributes on the group for styling; they don't reach the controls inside, so pass them to those controls too.

Examples

API Reference