Input Group

12 results

https://

Check

Auto 52% used

Send

---
import { ArrowUpIcon, PlusIcon, SearchIcon } from '@lucide/astro';

import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from '@bejamas/ui/components/input-group';
import { Separator } from '@bejamas/ui/components/separator';
---

<div class="grid w-full max-w-sm gap-6">
  <InputGroup>
    <InputGroupInput placeholder="Search..." />
    <InputGroupAddon>
      <SearchIcon />
    </InputGroupAddon>
    <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
  </InputGroup>

  <InputGroup>
    <InputGroupInput placeholder="example.com" class="!pl-1" />
    <InputGroupAddon>
      <InputGroupText>https://</InputGroupText>
    </InputGroupAddon>
    <InputGroupAddon align="inline-end">
      <InputGroupButton size="xs">Check</InputGroupButton>
    </InputGroupAddon>
  </InputGroup>

  <InputGroup>
    <InputGroupTextarea placeholder="Ask, Search or Chat..." />
    <InputGroupAddon align="block-end">
      <InputGroupButton size="icon-xs" class="rounded-full">
        <PlusIcon />
      </InputGroupButton>
      <InputGroupButton variant="ghost">Auto</InputGroupButton>
      <InputGroupText class="ml-auto">52% used</InputGroupText>
      <Separator orientation="vertical" class="!h-4" />
      <InputGroupButton size="icon-xs" variant="default" class="rounded-full">
        <ArrowUpIcon />
        <span class="sr-only">Send</span>
      </InputGroupButton>
    </InputGroupAddon>
  </InputGroup>
</div>

View CodeHide Code

Installation

bun

bunx bejamas add input-group

npm

npx bejamas add input-group

pnpm

pnpm dlx bejamas add input-group

yarn

yarn dlx bejamas add input-group

Usage

---
import { InputGroup, InputGroupInput, InputGroupAddon, InputGroupButton, InputGroupText } from '@bejamas/ui/components/input-group';
---

<InputGroup>
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon><SearchIcon /></InputGroupAddon>
</InputGroup>