Empathy DS

Appearance

Input Group ​

Wraps inputs with addons and buttons.

Examples ​

Default ​

vue
<InputGroup>
  <InputGroupAddon>
    <Search class="h-4 w-4" />
  </InputGroupAddon>
  <InputGroupInput placeholder="Search..." />
</InputGroup>

With Button ​

vue
<InputGroup>
  <InputGroupInput placeholder="Email" />
  <InputGroupAddon align="inline-end">
    <InputGroupButton>
      Subscribe
    </InputGroupButton>
  </InputGroupAddon>
</InputGroup>

With Text ​

https://
vue
<InputGroup>
  <InputGroupAddon>
    <InputGroupText>https://</InputGroupText>
  </InputGroupAddon>
  <InputGroupInput placeholder="google.com" />
</InputGroup>