# Button group: With text and an input

> `<ButtonGroupText />` adds a label or prefix. Render it as a `<label>` to name the input. The input stretches to fill the row.

Example: https://hextaui.com/docs/button-group/examples/input
Component docs: https://hextaui.com/docs/button-group.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/button-group-input.json
```

This adds `components/examples/button-group/input.tsx` with the Button group component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/button-group/input.tsx"
"use client"

import * as React from "react"
import { IconCopy, IconLink } from "@tabler/icons-react"

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

export function ButtonGroupInput() {
  const [value, setValue] = React.useState("hextaui.com/docs/button-group")

  return (
    <ButtonGroup className="w-full max-w-md" aria-label="Share link">
      <ButtonGroupText render={<label htmlFor="share-url" />}>
        <IconLink />
        https://
      </ButtonGroupText>
      <input
        id="share-url"
        value={value}
        onChange={(event) => setValue(event.target.value)}
        className="h-9 rounded-md border border-input bg-background px-3 text-sm transition-shadow outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-focus-ring focus-visible:outline-hidden dark:bg-input/30 pointer-coarse:text-touch"
      />
      <Button
        variant="outline"
        feedback
        successLabel="Copied"
        errorLabel="Blocked"
        onClick={() => navigator.clipboard.writeText(`https://${value}`)}
      >
        <IconCopy data-icon="inline-start" />
        Copy
      </Button>
    </ButtonGroup>
  )
}
```

## Props in this example

### ButtonGroupText

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<div>` | Render a <label> to name an input in the group. |

## More Button group examples

- [Sizes](https://hextaui.com/docs/button-group/examples/sizes.md)
- [Split button](https://hextaui.com/docs/button-group/examples/split.md)
- [Separators](https://hextaui.com/docs/button-group/examples/player.md)
- [Feedback inside a group](https://hextaui.com/docs/button-group/examples/feedback.md)
- [Vertical](https://hextaui.com/docs/button-group/examples/vertical.md)
- [Nested groups](https://hextaui.com/docs/button-group/examples/nested.md)
- [Disabled and invalid](https://hextaui.com/docs/button-group/examples/disabled.md)
- [Full width](https://hextaui.com/docs/button-group/examples/full-width.md)
- [As a fieldset](https://hextaui.com/docs/button-group/examples/fieldset.md)
- [Right to left](https://hextaui.com/docs/button-group/examples/rtl.md)