InputGroupExamples() — ui Function Reference

Architecture documentation for the InputGroupExamples() function in preview.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ InputGroupExamples() — ui Function Reference

Dependency Diagram

graph TD
  ac237cee_638c_82ac_cabf_df9fbefa3a7a["InputGroupExamples()"]
  f02a92c6_0fdc_9231_5419_752092d638ff["preview.tsx"]
  ac237cee_638c_82ac_cabf_df9fbefa3a7a -->|defined in| f02a92c6_0fdc_9231_5419_752092d638ff
  style ac237cee_638c_82ac_cabf_df9fbefa3a7a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/blocks/preview.tsx lines 659–872

function InputGroupExamples() {
  const [isFavorite, setIsFavorite] = React.useState(false)
  const [voiceEnabled, setVoiceEnabled] = React.useState(false)

  return (
    <Example title="Input Group">
      <div className="flex flex-col gap-6">
        <InputGroup>
          <InputGroupInput placeholder="Search..." />
          <InputGroupAddon>
            <IconPlaceholder
              lucide="SearchIcon"
              tabler="IconSearch"
              hugeicons="Search01Icon"
              phosphor="MagnifyingGlassIcon"
              remixicon="RiSearchLine"
            />
          </InputGroupAddon>
          <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
        </InputGroup>
        <InputGroup>
          <InputGroupInput placeholder="example.com" className="!pl-1" />
          <InputGroupAddon>
            <InputGroupText>https://</InputGroupText>
          </InputGroupAddon>
          <InputGroupAddon align="inline-end">
            <Tooltip>
              <TooltipTrigger
                render={
                  <InputGroupButton
                    className="rounded-full"
                    size="icon-xs"
                    aria-label="Info"
                  />
                }
              >
                <IconPlaceholder
                  lucide="InfoIcon"
                  tabler="IconInfoCircle"
                  hugeicons="AlertCircleIcon"
                  phosphor="InfoIcon"
                  remixicon="RiInformationLine"
                />
              </TooltipTrigger>
              <TooltipContent>This is content in a tooltip.</TooltipContent>
            </Tooltip>
          </InputGroupAddon>
        </InputGroup>
        <Field>
          <Label htmlFor="input-secure-19" className="sr-only">
            Input Secure
          </Label>
          <InputGroup>
            <InputGroupInput id="input-secure-19" className="!pl-0.5" />
            <InputGroupAddon>
              <Popover>
                <PopoverTrigger
                  render={
                    <InputGroupButton
                      variant="secondary"
                      size="icon-xs"
                      aria-label="Info"
                    />
                  }
                >
                  <IconPlaceholder
                    lucide="InfoIcon"
                    tabler="IconInfoCircle"
                    hugeicons="AlertCircleIcon"
                    phosphor="InfoIcon"
                    remixicon="RiInformationLine"
                  />
                </PopoverTrigger>
                <PopoverContent
                  align="start"
                  alignOffset={10}
                  className="flex flex-col gap-1 rounded-xl text-sm"
                >
                  <p className="font-medium">Your connection is not secure.</p>
                  <p>
                    You should not enter any sensitive information on this site.