# Input group: Header

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

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

## Add this example

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

This adds `components/examples/input-group/block-start.tsx` with the Input group component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/input-group/block-start.tsx"
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>
  )
}
```

## Props in this example

### InputGroupAddon

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

### InputGroupButton

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

## More Input group examples

- [Icon](https://hextaui.com/docs/input-group/examples/icon.md)
- [Clear](https://hextaui.com/docs/input-group/examples/clear.md)
- [Character count](https://hextaui.com/docs/input-group/examples/count.md)
- [Text](https://hextaui.com/docs/input-group/examples/text.md)
- [Button](https://hextaui.com/docs/input-group/examples/button.md)
- [Keyboard hint](https://hextaui.com/docs/input-group/examples/kbd.md)
- [Textarea](https://hextaui.com/docs/input-group/examples/textarea.md)
- [Password](https://hextaui.com/docs/input-group/examples/password.md)
- [Sizes](https://hextaui.com/docs/input-group/examples/sizes.md)
- [Invalid](https://hextaui.com/docs/input-group/examples/invalid.md)
- [Disabled](https://hextaui.com/docs/input-group/examples/disabled.md)
- [Loading](https://hextaui.com/docs/input-group/examples/loading.md)
- [Dropdown](https://hextaui.com/docs/input-group/examples/dropdown.md)
- [Long content](https://hextaui.com/docs/input-group/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/input-group/examples/rtl.md)