Empathy DS

Appearance

Input Group ​

Wraps inputs with addons and buttons.

Examples ​

Default ​

vue
<script setup>
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from '@empathyds/vue'
import { Search } from 'lucide-vue-next'
</script>

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

With Button ​

vue
<script setup>
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
} from '@empathyds/vue'
</script>

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

With Text ​

https://
vue
<script setup>
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
} from '@empathyds/vue'
</script>

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