---
fdRelatedComponents:
  - fd-input-group
  - fd-input
---

# Input Group

## Text add-on

<d-example name="input-group-slot-addon-text">
</d-example>

## Slot add-on

<d-example name="input-group-slot-addon-icon">
</d-example>

## Button add-on

<d-example name="input-group-slot-addon-button">
</d-example>

## Search

You have to provide two slots in order to make `fd-input-group-search` work properly:

1. `input`-slot: Use this slot to provide a search input.
2. `clear`-slot: Use this slot to provide a clear button. You can use `fd-input-group-clear-button` for that.

<d-example name="input-group-search">
</d-example>

## Compact Mode

<d-example name="input-group-compact">
</d-example>