12 results

https://

52% used

Installation

pnpm dlx kliping@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>

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	class-variance-authority@^0.7.1
Kliping items	button, input, textarea
Files	components/ui/input-group/input-group.vue components/ui/input-group/input-group-addon.vue components/ui/input-group/input-group-button.vue components/ui/input-group/input-group-input.vue components/ui/input-group/input-group-text.vue components/ui/input-group/input-group-textarea.vue components/ui/input-group/index.ts

Anatomy

Susunan bagiannya seperti dipakai di contoh-contoh di atas. Impor semua bagian dari satu tempat, lalu susun begini:

<InputGroup>
  <InputGroupInput />
  <InputGroupAddon>
    <InputGroupButton />
    <InputGroupText />
  </InputGroupAddon>
  <InputGroupTextarea />
</InputGroup>

API Reference

InputGroup

Komponen utama yang membungkus input dan addon.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"input-group"
[data-align]	set at runtime

<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	Type	Default	Description
align?	"inline-start" | "inline-end" | "block-start" | "block-end"	"inline-start"	Addon placement: inline-start, inline-end, block-start (above), or block-end (below).

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"input-group-addon"
[data-align]	"inline-start" | "inline-end" | "block-start" | "block-end"

<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	Type	Default	Description
variant?	"default" | "destructive" | "ghost" | "outline" | "secondary" | "link"	"ghost"	The visual style.
size?	"sm" | "xs" | "icon-xs" | "icon-sm"	"xs"	The visual size.

Slot	Props
#default	—

Data attribute	Value
[data-size]	"sm" | "xs" | "icon-xs" | "icon-sm"

<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.

Data attribute	Value
[data-slot]	"input-group-control"

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.

Data attribute	Value
[data-slot]	"input-group-control"

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

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

InputGroupText

Slot	Props
#default	—

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --border, --destructive, --input, --muted-foreground, --radius, --ring.

Credits

Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.