104Get started
HextaUI

Button group: As a fieldset

Use render to output a <fieldset> inside forms.

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

export function ButtonGroupFieldset() {
  return (
    <ButtonGroup render={<fieldset />} aria-label="Reply">
      <Button variant="outline">Reply</Button>
      <Button variant="outline">Reply all</Button>
      <Button variant="outline">Forward</Button>
    </ButtonGroup>
  )
}

Add this example

This adds the example as components/examples/button-group/fieldset.tsx, together with the Button group component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/button-group-fieldset.json

To add only the component, follow the Button group installation.

Props in this example

The Button group props this example sets, from the API reference.

ButtonGroup

PropTypeDefault
render
ReactElement | (props, state) => ReactElement<div>

Every prop is in the Button group API reference.

More Button group examples

See them all, with keyboard support and accessibility notes, on the Button group page.

Related components