72Los geht’s
HextaUI

Input group

Ein Input mit angehängten Icons, Text, Buttons oder Tastaturhinweis, die sich einen Rahmen und einen Fokusring teilen.

"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>
  )
}

Installation

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

Fügt die Komponente, die HextaUI-Theme-Tokens und alle HextaUI-Komponenten hinzu, von denen sie abhängt.

Verwendung

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>

Setze <InputGroupInput /> oder <InputGroupTextarea /> an den Anfang und die Addons danach. Addons platzieren sich mit align selbst, sodass das Feld in der Tab-Reihenfolge und für Screenreader zuerst kommt.

Die Gruppe verfolgt ihr Feld, sodass die intelligenten Teile keine Verdrahtung brauchen. <InputGroupClear />, <InputGroupPasswordToggle /> und <InputGroupCount /> lesen Wert, type und maxLength aus dem Feld, egal ob es gesteuert ist oder nicht.

Komposition

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

Beispiele

Icon

Icons sitzen auf beiden Seiten innerhalb des Rahmens. Ein Klick auf ein Icon fokussiert das Input, sodass sich die ganze Gruppe wie ein Feld anfühlt.

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>
  )
}

Leeren

<InputGroupClear /> blendet ein, sobald ein Wert vorhanden ist. Es leert über den Bearbeitungsverlauf des Browsers, sodass Cmd+Z den Text zurückbringt, und es löst dein onChange aus. Escape leert ebenfalls. Ein zweites Escape bleibt für den umgebenden Dialog oder das Popover.

"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>
  )
}

Zeichenzähler

<InputGroupCount /> zählt gegen das maxLength des Felds. Nur die Ziffern, die sich ändern, rollen. Die Zahl wird nahe am Limit dunkler und beim Erreichen rot, und eine getippte Taste über das Limit hinaus lässt sie wackeln. Screenreader hören eine Meldung, wenn das Feld dem Limit nahekommt und wenn es erreicht wird, nie bei jeder Taste.

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>
  )
}

Text

Verwende <InputGroupText /> für Einheiten, Währungen und URL-Teile. Das Padding des Inputs schrumpft neben einem Addon, sodass der Text wie ein Wert wirkt.

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 /> ist ein Ghost-Button, der so dimensioniert ist, dass er in das Feld passt. Seine Ecken sind konzentrisch zu denen der Gruppe, und er erhält seinen eigenen Fokusring.

"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>
  )
}

Tastaturhinweis

Ein einfaches <kbd> in einem Addon wird als Tastenkappe gestylt. Es ist nur ein visueller Hinweis, binde das Kürzel also selbst.

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 /> wächst mit seinem Inhalt bis 16 rem und scrollt dann. Die Höhe passt sich zwischen Zeilen sanft an, statt zu springen. Ein block-end-Addon wird zu einer Toolbar darunter, und Buttons an seinen Rändern erhalten denselben Einzug wie die Ecke, in der sie sitzen.

"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>
  )
}

Kopfzeile

Ein block-start-Addon sitzt über dem Feld. Füge separator hinzu, um eine Haarlinie dazwischen zu zeichnen.

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>
  )
}

Passwort

<InputGroupPasswordToggle /> schaltet ein type="password"-Feld auf Text und zurück. Der Cursor und die Auswahl bleiben, wo sie waren, ein Mausklick hält den Fokus im Feld, und das Passwort wird beim Absenden des Formulars wieder verborgen. Steuere es mit revealed.

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>
  )
}

Größen

size an der Gruppe legt die Höhe fest und gibt sie an das Input weiter, passend zu den <Input />-Größen. Buttons behalten bei jeder Größe konzentrische Ecken.

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>
  )
}

Ungültig

Setze aria-invalid am Input, und die ganze Gruppe wird rot, einschließlich ihres Fokusrings. Verknüpfe die Meldung mit aria-describedby.

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>
  )
}

Deaktiviert

Ein deaktiviertes Input dimmt die ganze Gruppe und zeigt darüber einen not-allowed-Cursor. Deaktiviere auch Addon-Buttons, da sie sonst benutzbar bleiben.

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>
  )
}

Lädt

Inline-Addons gleiten auf ihre neue Breite, wenn sich ihr Inhalt ändert, sodass das Feld nie springt, wenn ein Spinner zu einer Trefferzahl wird. Der Spinner dreht sich nur, wenn Bewegung erlaubt ist, und role="status" sagt den Text an.

"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

Rendere ein <InputGroupButton /> als Dropdown-Trigger, um das Input einzugrenzen.

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>
  )
}

Langer Inhalt

Lange Werte scrollen im Input, statt die Gruppe zu dehnen. Umschließe langen Addon-Text mit einem kürzenden Span mit maximaler Breite.

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>
  )
}

Rechts nach links

Addons, Padding und Eckenradien verwenden logische Seiten, sodass inline-start rechts landet.

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>
  )
}

Tastatur

TasteAktion
TabWechselt vom Feld zu jedem Addon-Button, in Quellreihenfolge.
ShiftTabGeht rückwärts durch die Buttons und das Feld.
EscapeMit einem InputGroupClear leert es das Feld. Ist es bereits leer, wird Escape durchgereicht.

Barrierefreiheit

  • Jedes Feld braucht einen Namen. Verwende ein sichtbares Label, ein Field oder aria-label. Icons und Addon-Text sind nicht Teil des Namens des Felds.
  • Gib reinen Icon-Buttons ein aria-label.
  • Wenn Addon-Text eine Bedeutung trägt, etwa eine Währung oder eine Domain, füge ihn dem Label hinzu oder verweise mit aria-describedby darauf.
  • <InputGroupClear /> wird in der Tab-Reihenfolge übersprungen, da Escape dasselbe tut. Der Passwort-Umschalter bleibt tabbar und behält denselben Namen, wobei aria-pressed seinen Zustand meldet.
  • Wenn ein Absenden das Feld als ungültig vorfindet, wackelt die Gruppe einmal. Bei reduzierter Bewegung ist der rote Rahmen der einzige Hinweis.
  • Auf Touchscreens ist der Feldtext mindestens 16 px groß, damit Smartphones beim Fokussieren nicht zoomen.

API-Referenz

<InputGroupInput /> und <InputGroupTextarea /> akzeptieren die Props der Elemente, die sie rendern. Die übrigen Teile akzeptieren die Attribute ihres Elements.

InputGroup

PropTypStandard
sizeHöhe der Gruppe, die an das Input weitergegeben wird.
"sm" | "default" | "lg""default"
AttributBeschreibung
data-slot="input-group"Die Gruppe in CSS ansprechen. Rendert role="group".
data-sizeDie aktuelle Größe.
data-filledVorhanden, solange das Feld einen Wert hat.
data-shakeVorhanden, während die Gruppe nach einem fehlgeschlagenen Absenden wackelt.
data-disabledSetze es selbst, um die Gruppe zu dimmen, wenn nur die Addons deaktiviert sind.
--input-group-radiusEckenradius der Gruppe. Buttons und Tastenkappen leiten ihren Radius davon ab.
--input-group-heightHöhe der Gruppe für die aktuelle Größe.

InputGroupInput

PropTypStandard
sizeWird von der Gruppe übernommen.
"sm" | "default" | "lg"–
aria-invalid
boolean–
disabled
booleanfalse
readOnly
booleanfalse
AttributBeschreibung
data-slot="input-group-control"Markiert das Feld. Die Gruppe liest daraus Fokus-, Invalid-, Disabled- und Read-only-Zustände.
data-invalidVorhanden, wenn ein umgebendes Field den Wert als ungültig markiert.
data-disabledVorhanden, wenn das Feld deaktiviert ist.
data-focusedVorhanden, solange das Feld den Fokus hat.
data-filledVorhanden, wenn das Feld einen Wert hat.
data-dirtyVorhanden, sobald sich der Wert vom Anfangswert unterscheidet.
data-touchedVorhanden, sobald das Feld fokussiert und wieder verlassen wurde.

InputGroupTextarea

PropTypStandard
autoResizeWächst mit dem Inhalt bis 16 rem und gleitet dabei zwischen den Höhen.
booleantrue
shakeLässt die Gruppe wackeln, wenn ein Absenden sie als ungültig vorfindet.
booleantrue
rows
number–
aria-invalid
boolean–
disabled
booleanfalse
AttributBeschreibung
data-slot="input-group-control"Markiert das Feld. Die Gruppe liest daraus Fokus-, Invalid-, Disabled- und Read-only-Zustände.
data-invalidVorhanden, wenn ein umgebendes Field den Wert als ungültig markiert.
data-disabledVorhanden, wenn das Feld deaktiviert ist.
data-focusedVorhanden, solange das Feld den Fokus hat.
data-filledVorhanden, wenn das Feld einen Wert hat.
data-dirtyVorhanden, sobald sich der Wert vom Anfangswert unterscheidet.
data-touchedVorhanden, sobald das Feld fokussiert und wieder verlassen wurde.

InputGroupAddon

PropTypStandard
align
"inline-start" | "inline-end" | "block-start" | "block-end""inline-start"
separatorZeichnet eine Haarlinie zwischen einem Block-Addon und dem Feld.
booleanfalse
AttributBeschreibung
data-slot="input-group-addon"Addons in CSS ansprechen.
data-alignDie aktuelle Ausrichtung.
data-separatorVorhanden, wenn separator gesetzt ist.
--input-group-addon-insetAbstand zwischen dem Rand der Gruppe und einem Button oder einer Tastenkappe darin.

InputGroupButton

PropTypStandard
variant
"default" | "outline" | "secondary" | "ghost" | "destructive" | "link""ghost"
size
"xs" | "sm" | "icon-xs" | "icon-sm""xs"
type
string"button"
feedbackJede Button-Prop funktioniert, auch der Lade- und Erfolgsablauf.
booleanfalse
AttributBeschreibung
data-slot="input-group-button"Addon-Buttons in CSS ansprechen.
data-sizeDie aktuelle Größe.

InputGroupClear

PropTypStandard
onClearWird aufgerufen, nachdem das Feld geleert wurde.
() => void–
aria-label
string"Clear"
children
ReactNode<IconX />
AttributBeschreibung
data-slot="input-group-clear"Den Löschen-Button in CSS ansprechen.
data-visibleVorhanden, solange das Feld einen Wert hat und bearbeitbar ist.

InputGroupPasswordToggle

PropTypStandard
revealedGesteuerter State. Nicht setzen, damit es sich selbst verwaltet.
boolean–
onRevealedChange
(revealed: boolean) => void–
aria-label
string"Show password"
AttributBeschreibung
data-slot="input-group-password-toggle"Den Umschalter in CSS ansprechen.
data-revealedVorhanden, solange das Passwort angezeigt wird.

InputGroupCount

PropTypStandard
thresholdVerbleibende Zeichen, ab denen die Zahl hervortritt.
number10% of maxLength, at most 20
announcementMeldung für Screenreader, wenn die Zeichenzahl den Schwellenwert überschreitet oder das Limit erreicht.
(remaining: number) => string–
AttributBeschreibung
data-slot="input-group-count"Den Zähler in CSS ansprechen.
data-state="near" | "limit"Vorhanden innerhalb des Schwellenwerts und wenn keine Zeichen mehr übrig sind.
data-bumpKurz vorhanden, wenn am Limit eine Taste gedrückt wird.

InputGroupText

AttributBeschreibung
data-slot="input-group-text"Addon-Text in CSS ansprechen.

Verwandt

In Blocks verwendet

Blocks, die auf Input group aufbauen.