12 results

https://

52% used

Installation

pnpm dlx shadcn-vue@latest add input-group

Usage

<script setup lang="ts">
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from '@/components/ui/input-group'
</script>

<template>
  <InputGroup>
    <InputGroupInput placeholder="Search..." />
    <InputGroupAddon>
      <SearchIcon />
    </InputGroupAddon>
    <InputGroupAddon align="inline-end">
      <InputGroupButton>Search</InputGroupButton>
    </InputGroupAddon>
  </InputGroup>
</template>

Examples

Icon

Text

Menampilkan keterangan teks tambahan di samping input.

$

USD

https://

.com

@company.com

120 characters left

Button

Menambahkan tombol untuk menjalankan aksi di dalam input group.

https://

Tooltip

Menambahkan tooltip untuk memberi konteks atau bantuan tambahan.

Textarea

Input group juga bisa dipakai bersama textarea. Untuk perataannya, gunakan block-start atau block-end.

Line 1, Column 1

script.js

Spinner

Menampilkan indikator pemuatan selagi input diproses.

Saving...

Please wait...

Label

Menambahkan label di dalam input group agar lebih mudah diakses.

@

Email

Dropdown

Memadukan input group dengan dropdown menu untuk interaksi yang lebih rumit.

Button Group

Membungkus input group dengan button group untuk membuat awalan dan akhiran.

https://

.com

Input Kustom

Tambahkan atribut data-slot="input-group-control" pada input kustom Anda agar perilaku dan state focus-nya ditangani otomatis.

Tidak ada style bawaan yang diterapkan ke input kustom. Style-nya Anda atur sendiri lewat prop class.

<script setup lang="ts">
import { InputGroup, InputGroupAddon, InputGroupButton } from '@/components/ui/input-group'
</script>

<template>
  <div class="grid w-full max-w-sm gap-6">
    <InputGroup>
      <textarea
        data-slot="input-group-control"
        class="flex field-sizing-content min-h-16 w-full resize-none rounded-md bg-transparent px-3 py-2.5 text-base transition-[color,box-shadow] outline-none md:text-sm"
        placeholder="Autoresize textarea..."
      />
      <InputGroupAddon align="block-end">
        <InputGroupButton class="ml-auto" size="sm" variant="default">
          Submit
        </InputGroupButton>
      </InputGroupAddon>
    </InputGroup>
  </div>
</template>

API Reference

InputGroup

Komponen utama yang membungkus input dan addon.

Prop	Tipe	Bawaan
class	string

<InputGroup>
  <InputGroupInput />
  <InputGroupAddon />
</InputGroup>

InputGroupAddon

Menampilkan ikon, teks, tombol, atau konten lain di samping input.

Focus Navigation

Agar navigasi focus berjalan benar, komponen InputGroupAddon sebaiknya diletakkan setelah input. Posisinya diatur lewat prop align.

Prop	Tipe	Bawaan
align	"inline-start" | "inline-end" | "block-start" | "block-end"	"inline-start"
class	string

<InputGroupAddon align="inline-end">
  <SearchIcon />
</InputGroupAddon>

Untuk <InputGroupInput />, pakai perataan inline-start atau inline-end. Untuk <InputGroupTextarea />, pakai block-start atau block-end.

Satu InputGroupAddon bisa memuat beberapa InputGroupButton sekaligus beserta ikon.

<InputGroupAddon>
  <InputGroupButton>Button</InputGroupButton>
  <InputGroupButton>Button</InputGroupButton>
</InputGroupAddon>

InputGroupButton

Menampilkan tombol di dalam input group.

Prop	Tipe	Bawaan
size	"xs" | "icon-xs" | "sm" | "icon-sm"	"xs"
variant	"default" | "destructive" | "outline" | "secondary" | "ghost" | "link"	"ghost"
class	string

<InputGroupButton>
Button
</InputGroupButton>

<InputGroupButton size="icon-xs" aria-label="Copy">
  <CopyIcon />
</InputGroupButton>

InputGroupInput

Pengganti <Input /> saat membangun input group. Style input group-nya sudah diterapkan, dan komponen ini memakai data-slot="input-group-control" yang seragam untuk menangani state focus.

Prop	Tipe	Bawaan
class	string

Semua prop lain diteruskan ke komponen <Input /> di baliknya.

<InputGroup>
  <InputGroupInput placeholder="Enter text..." />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
</InputGroup>

InputGroupTextarea

Pengganti <Textarea /> saat membangun input group. Style-nya sudah diterapkan, dan komponen ini memakai data-slot="input-group-control" yang seragam untuk menangani state focus.

Prop	Tipe	Bawaan
class	string

Semua prop lain diteruskan ke komponen <Textarea /> di baliknya.

<InputGroup>
  <InputGroupTextarea placeholder="Enter message..." />
  <InputGroupAddon align="block-end">
    <InputGroupButton>Send</InputGroupButton>
  </InputGroupAddon>
</InputGroup>