InputGroupWithAddons() — ui Function Reference

Architecture documentation for the InputGroupWithAddons() function in input-group-example.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ InputGroupWithAddons() — ui Function Reference

Dependency Diagram

graph TD
  20cf9064_74ea_90ce_b3a4_c00edbb4b471["InputGroupWithAddons()"]
  a740b52a_e6c2_0afa_8096_0716feaa239c["input-group-example.tsx"]
  20cf9064_74ea_90ce_b3a4_c00edbb4b471 -->|defined in| a740b52a_e6c2_0afa_8096_0716feaa239c
  style 20cf9064_74ea_90ce_b3a4_c00edbb4b471 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/input-group-example.tsx lines 119–293

function InputGroupWithAddons() {
  return (
    <Example title="With Addons">
      <FieldGroup>
        <Field>
          <FieldLabel htmlFor="input-icon-left-05">
            Addon (inline-start)
          </FieldLabel>
          <InputGroup>
            <InputGroupInput id="input-icon-left-05" />
            <InputGroupAddon>
              <IconPlaceholder
                lucide="SearchIcon"
                tabler="IconSearch"
                hugeicons="SearchIcon"
                phosphor="MagnifyingGlassIcon"
                remixicon="RiSearchLine"
                className="text-muted-foreground"
              />
            </InputGroupAddon>
          </InputGroup>
        </Field>
        <Field>
          <FieldLabel htmlFor="input-icon-right-07">
            Addon (inline-end)
          </FieldLabel>
          <InputGroup>
            <InputGroupInput id="input-icon-right-07" />
            <InputGroupAddon align="inline-end">
              <IconPlaceholder
                lucide="EyeOffIcon"
                tabler="IconEyeClosed"
                hugeicons="ViewOffIcon"
                phosphor="EyeSlashIcon"
                remixicon="RiEyeOffLine"
              />
            </InputGroupAddon>
          </InputGroup>
        </Field>
        <Field>
          <FieldLabel htmlFor="input-icon-both-09">
            Addon (inline-start and inline-end)
          </FieldLabel>
          <InputGroup>
            <InputGroupInput id="input-icon-both-09" />
            <InputGroupAddon>
              <IconPlaceholder
                lucide="MicIcon"
                tabler="IconMicrophone"
                hugeicons="VoiceIcon"
                phosphor="MicrophoneIcon"
                remixicon="RiMicLine"
                className="text-muted-foreground"
              />
            </InputGroupAddon>
            <InputGroupAddon align="inline-end">
              <IconPlaceholder
                lucide="RadioIcon"
                tabler="IconPlayerRecordFilled"
                hugeicons="RecordIcon"
                phosphor="RecordIcon"
                remixicon="RiRecordCircleLine"
                className="animate-pulse text-red-500"
              />
            </InputGroupAddon>
          </InputGroup>
        </Field>
        <Field>
          <FieldLabel htmlFor="input-addon-20">Addon (block-start)</FieldLabel>
          <InputGroup className="h-auto">
            <InputGroupInput id="input-addon-20" />
            <InputGroupAddon align="block-start">
              <InputGroupText>First Name</InputGroupText>
              <IconPlaceholder
                lucide="InfoIcon"
                tabler="IconInfoCircle"
                hugeicons="AlertCircleIcon"
                phosphor="InfoIcon"
                remixicon="RiInformationLine"
                className="text-muted-foreground ml-auto"
              />