Input group: Header

A block-start addon sits above the field. Add separator to draw a hairline between them.

script.js

import { IconCopy, IconFileCode } from "@tabler/icons-react"

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupText,
  InputGroupTextarea,
} from "@/components/ui/input-group"

export function InputGroupBlockStart() {
  return (
    <InputGroup className="max-w-sm">
      <InputGroupTextarea
        defaultValue={'console.log("Hello from HextaUI")'}
        aria-label="script.js"
      />
      <InputGroupAddon align="block-start" separator>
        <InputGroupText>
          <IconFileCode />
          script.js
        </InputGroupText>
        <InputGroupButton size="icon-xs" aria-label="Copy" className="ms-auto">
          <IconCopy />
        </InputGroupButton>
      </InputGroupAddon>
    </InputGroup>
  )
}

Add this example

This adds the example as components/examples/input-group/block-start.tsx, together with the Input group component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/input-group-block-start.json

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

Props in this example

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

InputGroupAddon

Prop	Type	Default
`align`	`"inline-start" \| "inline-end" \| "block-start" \| "block-end"`	`"inline-start"`
`separator`Draw a hairline between a block addon and the field.	`boolean`	`false`

InputGroupButton

Prop	Type	Default
`size`	`"xs" \| "sm" \| "icon-xs" \| "icon-sm"`	`"xs"`

Every prop is in the Input group API reference.

More Input group examples

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