InputGroupExamples() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ InputGroupExamples() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/radix/blocks/preview.tsx lines 651–854

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 asChild>
                <InputGroupButton
                  className="rounded-full"
                  size="icon-xs"
                  aria-label="Info"
                >
                  <IconPlaceholder
                    lucide="InfoIcon"
                    tabler="IconInfoCircle"
                    hugeicons="AlertCircleIcon"
                    phosphor="InfoIcon"
                    remixicon="RiInformationLine"
                  />
                </InputGroupButton>
              </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" />
            <Popover>
              <PopoverTrigger asChild>
                <InputGroupAddon>
                  <InputGroupButton
                    variant="secondary"
                    size="icon-xs"
                    aria-label="Info"
                  >
                    <IconPlaceholder
                      lucide="InfoIcon"
                      tabler="IconInfoCircle"
                      hugeicons="AlertCircleIcon"
                      phosphor="InfoIcon"
                      remixicon="RiInformationLine"
                    />
                  </InputGroupButton>
                </InputGroupAddon>
              </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.
                </p>
              </PopoverContent>
            </Popover>