Input Group

An input field with attached addons like icons, buttons, or text labels.

12 results

https://

52% used

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

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

8
<div class="grid w-full max-w-sm gap-6">
9
  <InputGroup>
10
    <InputGroupInput placeholder="Search..." />
11
    <InputGroupAddon>
12
      <SearchIcon />
13
    </InputGroupAddon>
14
    <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
15
  </InputGroup>
16

17
  <InputGroup>
18
    <InputGroupInput placeholder="example.com" />
19
    <InputGroupAddon>
20
      <InputGroupText>https://</InputGroupText>
21
    </InputGroupAddon>
22
    <InputGroupAddon align="inline-end">
23
      <InputGroupButton size="xs">Check</InputGroupButton>
24
    </InputGroupAddon>
25
  </InputGroup>
26

27
  <InputGroup>
28
    <InputGroupTextarea placeholder="Ask, Search or Chat..." />
29
    <InputGroupAddon align="block-end">
30
      <InputGroupButton size="icon-xs" class="rounded-full">
31
        <PlusIcon />
32
      </InputGroupButton>
33
      <InputGroupButton variant="ghost">Auto</InputGroupButton>
34
      <InputGroupText class="ml-auto">52% used</InputGroupText>
35
      <Separator orientation="vertical" class="!h-4" />
36
      <InputGroupButton size="icon-xs" variant="default" class="rounded-full">
37
        <ArrowUpIcon />
38
        <span class="sr-only">Send</span>
39
      </InputGroupButton>
40
    </InputGroupAddon>
41
  </InputGroup>
42
</div>

Installation

bunx bejamas add input-group

npx bejamas add input-group

pnpm dlx bejamas add input-group

yarn dlx bejamas add input-group

Usage

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

5
<InputGroup>
6
  <InputGroupInput placeholder="Search..." />
7
  <InputGroupAddon><SearchIcon /></InputGroupAddon>
8
</InputGroup>

Props

Prop	Type	Default
`size`	`VariantProps<typeof inputGroupVariants>["size"]`	`"default"`
`class`	`string`	`""`

Examples

Sizes

1
---
2
import { InputGroup, InputGroupInput } from '@bejamas/ui/components/input-group';
3
---
4

5
<div class="grid w-full max-w-sm gap-3">
6
  <InputGroup size="sm">
7
    <InputGroupInput placeholder="Small (h-8)" />
8
  </InputGroup>
9
  <InputGroup>
10
    <InputGroupInput placeholder="Default (h-9)" />
11
  </InputGroup>
12
  <InputGroup size="lg">
13
    <InputGroupInput placeholder="Large (h-10)" />
14
  </InputGroup>
15
</div>

API Reference

Prop	Type	Default
`size`	`"sm" \| "default" \| "lg"`	`"default"`