72Başlayın
HextaUI

Input group

Simgeler, metin, düğmeler ya da klavye ipucu eklenmiş; tek kenarlık ve odak halkasını paylaşan bir input.

"use client"

import * as React from "react"
import { IconArrowUp, IconLock, IconSearch } from "@tabler/icons-react"

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupClear,
  InputGroupCount,
  InputGroupInput,
  InputGroupPasswordToggle,
  InputGroupTextarea,
} from "@/components/ui/input-group"

export function InputGroupDemo() {
  const [message, setMessage] = React.useState("")

  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <InputGroup>
        <InputGroupInput
          type="search"
          defaultValue="Accordion"
          placeholder="Search components"
          aria-label="Search components"
        />
        <InputGroupAddon>
          <IconSearch />
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <InputGroupClear />
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupInput
          type="password"
          defaultValue="hunter2-but-longer"
          autoComplete="current-password"
          aria-label="Password"
        />
        <InputGroupAddon>
          <IconLock />
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <InputGroupPasswordToggle />
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupTextarea
          value={message}
          onChange={(event) => setMessage(event.target.value)}
          maxLength={140}
          placeholder="Leave a note for the team"
          aria-label="Note"
        />
        <InputGroupAddon align="block-end">
          <InputGroupCount />
          <InputGroupButton
            variant="default"
            size="icon-xs"
            aria-label="Post note"
            disabled={!message.trim()}
            className="ms-auto"
          >
            <IconArrowUp />
          </InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
    </div>
  )
}

Kurulum

pnpm dlx shadcn@latest add https://hextaui.com/r/input-group.json

Bileşeni, HextaUI tema token'larını ve bileşenin bağımlı olduğu tüm HextaUI bileşenlerini ekler.

Kullanım

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupClear,
  InputGroupCount,
  InputGroupInput,
  InputGroupPasswordToggle,
  InputGroupText,
  InputGroupTextarea,
} from "@/components/ui/input-group"
<InputGroup>
  <InputGroupInput placeholder="Search…" aria-label="Search" />
  <InputGroupAddon>
    <IconSearch />
  </InputGroupAddon>
  <InputGroupAddon align="inline-end">
    <InputGroupClear />
  </InputGroupAddon>
</InputGroup>

Önce <InputGroupInput /> veya <InputGroupTextarea />, ardından ekleri koyun. Ekler kendilerini align ile yerleştirir; böylece alan tab sırasında ve ekran okuyucular için ilk gelir.

Grup alanını izler; bu yüzden akıllı parçalar bağlantı gerektirmez. <InputGroupClear />, <InputGroupPasswordToggle /> ve <InputGroupCount />, kontrollü olsun olmasın, alandan değeri, type'ı ve maxLength'i okur.

Kompozisyon

InputGroup
├── InputGroupAddon
│   ├── InputGroupText
│   ├── InputGroupButton
│   ├── InputGroupClear
│   ├── InputGroupCount
│   └── InputGroupPasswordToggle
└── InputGroupInput / InputGroupTextarea

Örnekler

Simge

Simgeler kenarlığın içinde iki yanda durur. Bir simgeye tıklamak girdiye odaklanır; böylece tüm grup tek bir alan gibi hissedilir.

import { IconCheck, IconMail, IconSearch } from "@tabler/icons-react"

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group"

export function InputGroupIcon() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <InputGroup>
        <InputGroupInput placeholder="Search…" aria-label="Search" />
        <InputGroupAddon>
          <IconSearch />
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupInput
          type="email"
          defaultValue="[email protected]"
          aria-label="Email"
        />
        <InputGroupAddon>
          <IconMail />
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <IconCheck className="text-success" aria-label="Verified" />
        </InputGroupAddon>
      </InputGroup>
    </div>
  )
}

Temizle

<InputGroupClear /> bir değer olduğunda solarak belirir. Tarayıcının düzenleme geçmişi aracılığıyla temizler; bu yüzden Cmd+Z metni geri getirir ve onChange'inizi tetikler. Escape de temizler. İkinci bir Escape, çevresindeki diyalog veya popover için bırakılır.

"use client"

import * as React from "react"
import { IconSearch } from "@tabler/icons-react"

import {
  InputGroup,
  InputGroupAddon,
  InputGroupClear,
  InputGroupInput,
} from "@/components/ui/input-group"

const fruits = ["Apple", "Apricot", "Banana", "Blackberry", "Cherry", "Fig"]

export function InputGroupClearDemo() {
  const [query, setQuery] = React.useState("ap")
  const matches = fruits.filter((fruit) =>
    fruit.toLowerCase().includes(query.trim().toLowerCase())
  )

  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <InputGroup>
        <InputGroupInput
          type="search"
          value={query}
          onChange={(event) => setQuery(event.target.value)}
          placeholder="Filter fruit"
          aria-label="Filter fruit"
        />
        <InputGroupAddon>
          <IconSearch />
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <InputGroupClear />
        </InputGroupAddon>
      </InputGroup>
      <p className="text-sm text-muted-foreground">
        {matches.length > 0 ? matches.join(", ") : "No fruit matches."}
      </p>
    </div>
  )
}

Karakter sayısı

<InputGroupCount /> alanın maxLength değerine göre sayar. Yalnızca değişen basamaklar döner. Sayı sınıra yaklaşırken koyulaşır, sınırda kırmızıya döner ve sınırı aşan bir tuş onu hafifçe sarsar. Ekran okuyucular, alan sınıra yaklaştığında ve ulaştığında bir mesaj duyar; her tuşta duymaz.

import { IconAt } from "@tabler/icons-react"

import {
  InputGroup,
  InputGroupAddon,
  InputGroupCount,
  InputGroupInput,
} from "@/components/ui/input-group"

export function InputGroupCountDemo() {
  return (
    <InputGroup className="max-w-sm">
      <InputGroupInput
        defaultValue="hextaui"
        maxLength={15}
        autoComplete="username"
        aria-label="Username"
      />
      <InputGroupAddon>
        <IconAt />
      </InputGroupAddon>
      <InputGroupAddon align="inline-end">
        <InputGroupCount />
      </InputGroupAddon>
    </InputGroup>
  )
}

Metin

Birimler, para birimleri ve URL parçaları için <InputGroupText /> kullanın. Girdinin dolgusu bir ekin yanında daralır; böylece metin tek bir değer gibi okunur.

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
} from "@/components/ui/input-group"

export function InputGroupTextDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <InputGroup>
        <InputGroupInput
          placeholder="0.00"
          inputMode="decimal"
          aria-label="Price"
        />
        <InputGroupAddon>
          <InputGroupText>$</InputGroupText>
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <InputGroupText>USD</InputGroupText>
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupInput placeholder="hextaui" aria-label="Domain" />
        <InputGroupAddon>
          <InputGroupText>https://</InputGroupText>
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <InputGroupText>.com</InputGroupText>
        </InputGroupAddon>
      </InputGroup>
    </div>
  )
}

Button

<InputGroupButton /> alanın içine sığacak boyutta bir ghost düğmedir. Köşeleri grubunkilerle eş merkezlidir ve kendi odak halkasını alır.

"use client"

import * as React from "react"
import { IconCheck, IconCopy, IconX } from "@tabler/icons-react"

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
} from "@/components/ui/input-group"

export function InputGroupButtonDemo() {
  const [copied, setCopied] = React.useState(false)
  const [query, setQuery] = React.useState("button group")

  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <InputGroup>
        <InputGroupInput
          readOnly
          defaultValue="https://hextaui.com/docs/input-group"
          aria-label="Share link"
        />
        <InputGroupAddon align="inline-end">
          <InputGroupButton
            size="icon-xs"
            aria-label={copied ? "Copied" : "Copy link"}
            onClick={async () => {
              await navigator.clipboard
                ?.writeText("https://hextaui.com/docs/input-group")
                .catch(() => {})
              setCopied(true)
              setTimeout(() => setCopied(false), 1500)
            }}
          >
            {copied ? <IconCheck /> : <IconCopy />}
          </InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupInput
          value={query}
          onChange={(event) => setQuery(event.target.value)}
          placeholder="Search components…"
          aria-label="Search components"
        />
        <InputGroupAddon align="inline-end">
          {query ? (
            <InputGroupButton
              size="icon-xs"
              aria-label="Clear search"
              onClick={() => setQuery("")}
            >
              <IconX />
            </InputGroupButton>
          ) : null}
          <InputGroupButton variant="secondary">Search</InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
    </div>
  )
}

Klavye ipucu

Bir ekin içindeki düz bir <kbd> tuş kapağı olarak stillenir. Yalnızca görsel bir ipucudur; kısayolu kendiniz bağlayın.

import { IconSearch } from "@tabler/icons-react"

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group"

export function InputGroupKbd() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <InputGroup>
        <InputGroupInput placeholder="Search docs…" aria-label="Search docs" />
        <InputGroupAddon>
          <IconSearch />
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <kbd>⌘</kbd>
          <kbd>K</kbd>
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupInput
          placeholder="Jump to file…"
          aria-label="Jump to file"
        />
        <InputGroupAddon align="inline-end">
          <kbd>/</kbd>
        </InputGroupAddon>
      </InputGroup>
    </div>
  )
}

Textarea

<InputGroupTextarea /> içeriğiyle birlikte 16rem'e kadar büyür, sonra kayar. Yükseklik satırlar arasında zıplamak yerine yumuşakça değişir. Bir block-end eki altında bir araç çubuğuna dönüşür ve kenarlarındaki düğmeler içinde bulundukları köşenin aynı iç boşluğunu alır.

"use client"

import * as React from "react"
import { IconArrowUp, IconPaperclip } from "@tabler/icons-react"

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupCount,
  InputGroupTextarea,
} from "@/components/ui/input-group"

export function InputGroupTextareaDemo() {
  const [value, setValue] = React.useState("")

  return (
    <InputGroup className="max-w-sm">
      <InputGroupTextarea
        value={value}
        onChange={(event) => setValue(event.target.value)}
        maxLength={280}
        placeholder="Write a reply…"
        aria-label="Reply"
      />
      <InputGroupAddon align="block-end">
        <InputGroupButton size="icon-xs" aria-label="Attach a file">
          <IconPaperclip />
        </InputGroupButton>
        <InputGroupCount className="ms-auto" />
        <InputGroupButton
          variant="default"
          size="icon-xs"
          aria-label="Send"
          disabled={!value.trim()}
        >
          <IconArrowUp />
        </InputGroupButton>
      </InputGroupAddon>
    </InputGroup>
  )
}

Üst bilgi

Bir block-start eki alanın üstünde durur. Aralarına ince bir çizgi çizmek için separator ekleyin.

import { IconCopy, IconFileCode } from "@tabler/icons-react"

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupText,
  InputGroupTextarea,
} from "@/components/ui/input-group"

export function InputGroupBlockStart() {
  return (
    <InputGroup className="max-w-sm">
      <InputGroupTextarea
        defaultValue={'console.log("Hello from HextaUI")'}
        aria-label="script.js"
      />
      <InputGroupAddon align="block-start" separator>
        <InputGroupText>
          <IconFileCode />
          script.js
        </InputGroupText>
        <InputGroupButton size="icon-xs" aria-label="Copy" className="ms-auto">
          <IconCopy />
        </InputGroupButton>
      </InputGroupAddon>
    </InputGroup>
  )
}

Parola

<InputGroupPasswordToggle /> bir type="password" alanını metne ve geri çevirir. İmleç ve seçim olduğu yerde kalır, fare tıklaması odağı alanda tutar ve form gönderildiğinde parola yeniden gizlenir. revealed ile kontrol edin.

import { IconLock } from "@tabler/icons-react"

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupPasswordToggle,
} from "@/components/ui/input-group"

export function InputGroupPassword() {
  return (
    <InputGroup className="max-w-sm">
      <InputGroupInput
        type="password"
        defaultValue="correct horse battery staple"
        autoComplete="current-password"
        aria-label="Password"
      />
      <InputGroupAddon>
        <IconLock />
      </InputGroupAddon>
      <InputGroupAddon align="inline-end">
        <InputGroupPasswordToggle />
      </InputGroupAddon>
    </InputGroup>
  )
}

Boyutlar

Gruptaki size yüksekliği belirler ve <Input /> boyutlarıyla eşleşerek girdiye aktarılır. Düğmeler her boyutta eş merkezli köşeleri korur.

import { IconSearch } from "@tabler/icons-react"

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
} from "@/components/ui/input-group"

export function InputGroupSizes() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      {(["sm", "default", "lg"] as const).map((size) => (
        <InputGroup key={size} size={size}>
          <InputGroupInput
            placeholder={`Size ${size}`}
            aria-label={`Size ${size}`}
          />
          <InputGroupAddon>
            <IconSearch />
          </InputGroupAddon>
          <InputGroupAddon align="inline-end">
            <InputGroupButton>Go</InputGroupButton>
          </InputGroupAddon>
        </InputGroup>
      ))}
    </div>
  )
}

Geçersiz

Girdide aria-invalid ayarlayın; odak halkası dahil tüm grup kırmızıya döner. Mesajı aria-describedby ile bağlayın.

import { IconAt, IconAlertCircle } from "@tabler/icons-react"

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group"

export function InputGroupInvalid() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <InputGroup>
        <InputGroupInput
          defaultValue="preet@"
          aria-label="Email"
          aria-invalid
          aria-describedby="email-error"
        />
        <InputGroupAddon>
          <IconAt />
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <IconAlertCircle className="text-destructive" aria-hidden />
        </InputGroupAddon>
      </InputGroup>
      <p id="email-error" className="text-sm text-destructive">
        Enter a complete email address.
      </p>
    </div>
  )
}

Devre dışı

Devre dışı bir girdi tüm grubu soluklaştırır ve üzerinde not-allowed imleci gösterir. Aksi halde kullanılabilir kalacakları için ek düğmelerini de devre dışı bırakın.

import { IconLink } from "@tabler/icons-react"

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
} from "@/components/ui/input-group"

export function InputGroupDisabled() {
  return (
    <InputGroup className="max-w-sm">
      <InputGroupInput
        disabled
        defaultValue="https://hextaui.com"
        aria-label="Link"
      />
      <InputGroupAddon>
        <IconLink />
      </InputGroupAddon>
      <InputGroupAddon align="inline-end">
        <InputGroupButton disabled>Copy</InputGroupButton>
      </InputGroupAddon>
    </InputGroup>
  )
}

Yükleniyor

Satır içi ekler, içerikleri değiştiğinde yeni genişliklerine yumuşakça geçer; böylece bir spinner sonuç sayısına dönüşürken alan asla zıplamaz. Spinner yalnızca harekete izin verildiğinde döner ve role="status" metni duyurur.

"use client"

import * as React from "react"
import { IconLoader2, IconSearch } from "@tabler/icons-react"

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
} from "@/components/ui/input-group"

const packages = ["react", "react-dom", "react-hook-form", "redux", "remix"]

export function InputGroupLoading() {
  const [query, setQuery] = React.useState("re")
  const [pending, setPending] = React.useState(false)
  const timer = React.useRef<ReturnType<typeof setTimeout>>(undefined)
  const results = packages.filter((name) => name.includes(query.trim()))

  React.useEffect(() => () => clearTimeout(timer.current), [])

  return (
    <InputGroup className="max-w-sm">
      <InputGroupInput
        value={query}
        onChange={(event) => {
          setQuery(event.target.value)
          setPending(true)
          clearTimeout(timer.current)
          timer.current = setTimeout(() => setPending(false), 600)
        }}
        aria-label="Search packages"
        aria-busy={pending}
      />
      <InputGroupAddon>
        <IconSearch />
      </InputGroupAddon>
      <InputGroupAddon align="inline-end">
        <InputGroupText role="status">
          {pending ? (
            <>
              <IconLoader2 className="motion-safe:animate-spin" aria-hidden />
              Searching
            </>
          ) : results.length === 1 ? (
            "1 package"
          ) : (
            `${results.length} packages`
          )}
        </InputGroupText>
      </InputGroupAddon>
    </InputGroup>
  )
}

Dropdown

Girdinin kapsamını daraltmak için bir <InputGroupButton /> bileşenini dropdown trigger'ı olarak render edin.

import { IconChevronDown } from "@tabler/icons-react"

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
} from "@/components/ui/input-group"

export function InputGroupDropdown() {
  return (
    <InputGroup className="max-w-sm">
      <InputGroupInput placeholder="Enter a search term" aria-label="Search" />
      <InputGroupAddon align="inline-end">
        <DropdownMenu>
          <DropdownMenuTrigger render={<InputGroupButton />}>
            Everywhere
            <IconChevronDown data-icon="inline-end" />
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuGroup>
              <DropdownMenuItem>Everywhere</DropdownMenuItem>
              <DropdownMenuItem>This project</DropdownMenuItem>
              <DropdownMenuItem>Documentation</DropdownMenuItem>
            </DropdownMenuGroup>
          </DropdownMenuContent>
        </DropdownMenu>
      </InputGroupAddon>
    </InputGroup>
  )
}

Uzun içerik

Uzun değerler grubu genişletmek yerine girdinin içinde kayar. Uzun ek metnini azami genişlikli, kısaltan bir span içine sarın.

import { IconWorld } from "@tabler/icons-react"

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
} from "@/components/ui/input-group"

export function InputGroupLongContent() {
  return (
    <div className="flex w-72 flex-col gap-4">
      <InputGroup>
        <InputGroupInput
          defaultValue="averyveryverylongunbrokenvaluethatkeepsgoingandgoing"
          aria-label="Value"
        />
        <InputGroupAddon>
          <IconWorld />
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <InputGroupText>.example.com</InputGroupText>
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupInput placeholder="name" aria-label="Subdomain" />
        <InputGroupAddon>
          <InputGroupText className="max-w-28">
            <span className="truncate">
              https://workspace-with-a-long-name.
            </span>
          </InputGroupText>
        </InputGroupAddon>
      </InputGroup>
    </div>
  )
}

Sağdan sola

Ekler, dolgu ve köşe yarıçapları mantıksal kenarlar kullanır; bu yüzden inline-start sağa denk gelir.

import { IconArrowUp, IconSearch } from "@tabler/icons-react"

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

export function InputGroupRtl() {
  return (
    <div dir="rtl" className="flex w-full max-w-sm flex-col gap-4">
      <InputGroup>
        <InputGroupInput placeholder="ابحث…" aria-label="بحث" />
        <InputGroupAddon>
          <IconSearch />
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <kbd>⌘K</kbd>
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupInput placeholder="0.00" aria-label="السعر" />
        <InputGroupAddon>
          <InputGroupText>ر.س</InputGroupText>
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <InputGroupButton variant="default" size="icon-xs" aria-label="إرسال">
            <IconArrowUp />
          </InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
    </div>
  )
}

Klavye

TuşAction
TabAlandan her ek düğmesine kaynak sırasıyla geçer.
ShiftTabDüğmeler ve alan arasında geriye doğru gezinir.
EscapeBir InputGroupClear ile alanı temizler. Zaten boşsa Escape geçip gider.

Erişilebilirlik

  • Her alanın bir adı olmalıdır. Görünür bir etiket, bir Field veya aria-label kullanın. Simgeler ve ek metni alan adının parçası değildir.
  • Yalnızca simgeli düğmelere bir aria-label verin.
  • Ek metni bir para birimi veya alan adı gibi anlam taşıyorsa, onu etikete ekleyin veya aria-describedby ile ona başvurun.
  • <InputGroupClear /> Escape aynı işi yaptığı için tab sırasında atlanır. Parola düğmesi tab ile erişilebilir kalır ve aynı adı korur; durumunu aria-pressed bildirir.
  • Bir gönderim alanı geçersiz bulduğunda grup bir kez sarsılır. Azaltılmış harekette tek ipucu kırmızı kenarlıktır.
  • Dokunmatik ekranlarda alan metni en az 16px'tir; böylece telefonlar odaklanıldığında yakınlaştırmaz.

API referansı

<InputGroupInput /> ve <InputGroupTextarea /> render ettikleri öğelerin prop'larını kabul eder. Diğer parçalar öğelerinin niteliklerini kabul eder.

InputGroup

PropTürVarsayılan
sizeGirdiye aktarılan grup yüksekliği.
"sm" | "default" | "lg""default"
ÖznitelikAçıklama
data-slot="input-group"CSS'te grubu hedefleyin. role="group" render eder.
data-sizeGeçerli boyut.
data-filledAlanın bir değeri olduğu sürece bulunur.
data-shakeBaşarısız bir gönderimden sonra grup sarsılırken bulunur.
data-disabledYalnızca ekler devre dışıyken grubu soluklaştırmak için kendiniz ayarlayın.
--input-group-radiusGrubun köşe yarıçapı. Düğmeler ve tuş kapakları yarıçaplarını buradan türetir.
--input-group-heightGeçerli boyut için grubun yüksekliği.

InputGroupInput

PropTürVarsayılan
sizeGruptan devralınır.
"sm" | "default" | "lg"–
aria-invalid
boolean–
disabled
booleanfalse
readOnly
booleanfalse
ÖznitelikAçıklama
data-slot="input-group-control"Alanı işaretler. Grup, odak, geçersiz, devre dışı ve salt okunur durumlarını ondan okur.
data-invalidÇevreleyen bir Field değeri geçersiz işaretlediğinde bulunur.
data-disabledAlan devre dışı olduğunda bulunur.
data-focusedAlan odaktayken bulunur.
data-filledAlanın bir değeri olduğunda bulunur.
data-dirtyDeğer ilk değerden farklı olduğunda bulunur.
data-touchedAlana odaklanıp ayrıldıktan sonra bulunur.

InputGroupTextarea

PropTürVarsayılan
autoResizeİçerikle birlikte 16rem'e kadar büyür; yükseklikler arasında yumuşakça değişir.
booleantrue
shakeBir gönderim geçersiz bulduğunda grubu sarsın.
booleantrue
rows
number–
aria-invalid
boolean–
disabled
booleanfalse
ÖznitelikAçıklama
data-slot="input-group-control"Alanı işaretler. Grup, odak, geçersiz, devre dışı ve salt okunur durumlarını ondan okur.
data-invalidÇevreleyen bir Field değeri geçersiz işaretlediğinde bulunur.
data-disabledAlan devre dışı olduğunda bulunur.
data-focusedAlan odaktayken bulunur.
data-filledAlanın bir değeri olduğunda bulunur.
data-dirtyDeğer ilk değerden farklı olduğunda bulunur.
data-touchedAlana odaklanıp ayrıldıktan sonra bulunur.

InputGroupAddon

PropTürVarsayılan
align
"inline-start" | "inline-end" | "block-start" | "block-end""inline-start"
separatorBir blok eki ile alan arasına ince bir çizgi çizin.
booleanfalse
ÖznitelikAçıklama
data-slot="input-group-addon"CSS'te ekleri hedefleyin.
data-alignGeçerli hizalama.
data-separatorseparator ayarlandığında bulunur.
--input-group-addon-insetGrubun kenarı ile içindeki bir düğme veya tuş kapağı arasındaki boşluk.

InputGroupButton

PropTürVarsayılan
variant
"default" | "outline" | "secondary" | "ghost" | "destructive" | "link""ghost"
size
"xs" | "sm" | "icon-xs" | "icon-sm""xs"
type
string"button"
feedbackYükleme ve başarı akışı dahil her Button prop'u çalışır.
booleanfalse
ÖznitelikAçıklama
data-slot="input-group-button"CSS'te ek düğmelerini hedefleyin.
data-sizeGeçerli boyut.

InputGroupClear

PropTürVarsayılan
onClearAlan temizlendikten sonra çağrılır.
() => void–
aria-label
string"Clear"
children
ReactNode<IconX />
ÖznitelikAçıklama
data-slot="input-group-clear"CSS'te temizle düğmesini hedefleyin.
data-visibleAlanın bir değeri olduğu ve düzenlenebilir olduğu sürece bulunur.

InputGroupPasswordToggle

PropTürVarsayılan
revealedKontrollü state. Kendini yönetmesi için ayarlamadan bırakın.
boolean–
onRevealedChange
(revealed: boolean) => void–
aria-label
string"Show password"
ÖznitelikAçıklama
data-slot="input-group-password-toggle"CSS'te toggle'ı hedefleyin.
data-revealedParola gösterilirken bulunur.

InputGroupCount

PropTürVarsayılan
thresholdSayı öne çıkmaya başladığında kalan karakter sayısı.
number10% of maxLength, at most 20
announcementSayı eşiği geçtiğinde veya sınıra ulaştığında ekran okuyucular için mesaj.
(remaining: number) => string–
ÖznitelikAçıklama
data-slot="input-group-count"CSS'te sayacı hedefleyin.
data-state="near" | "limit"Eşik içinde ve hiç karakter kalmadığında bulunur.
data-bumpSınırda bir tuşa basıldığında kısa süre bulunur.

InputGroupText

ÖznitelikAçıklama
data-slot="input-group-text"CSS'te ek metnini hedefleyin.

İlgili

Kullanıldığı bloklar

Input group üzerine kurulan bloklar.