f-ui

Icon-leading URL field built on shadcn Input with a default link icon and shared inputs-internals shell.

URL Input is a thin wrapper around IconLeadingInput with type="url" and a default link icon. Registry item url-input pulls input and inputs-internals and declares lucide-react.

Installing

pnpm dlx shadcn@latest add https://ui.isaacfei.com/r/url-input.json

npx shadcn@latest add https://ui.isaacfei.com/r/url-input.json

yarn dlx shadcn@latest add https://ui.isaacfei.com/r/url-input.json

bun x shadcn@latest add https://ui.isaacfei.com/r/url-input.json

With a namespace: npx shadcn@latest add @f-ui/url-input.

Usage

import { UrlInput } from '@/components/f-ui/url-input/url-input';

<UrlInput value={url} onChange={(e) => setUrl(e.target.value)} />

Examples

Value:—

"use client";

import { useState } from "react";

import { UrlInput } from "@/components/f-ui/url-input/url-input";
import {
  EmptyValuePlaceholder,
  isEmptyDisplayValue,
} from "@/components/f-ui/empty-value-placeholder";

export function UrlInputDemo() {
  const [value, setValue] = useState("");

  return (
    <div className="max-w-sm space-y-3">
      <UrlInput
        value={value}
        onChange={(e) => setValue(e.target.value)}
        aria-label="URL"
      />
      <p className="text-muted-foreground flex flex-wrap items-center gap-x-1 gap-y-0.5 text-xs">
        <span>Value:</span>
        {isEmptyDisplayValue(value) ? (
          <EmptyValuePlaceholder />
        ) : (
          <span className="text-foreground max-w-full break-all font-medium">
            {value}
          </span>
        )}
      </p>
    </div>
  );
}

API Reference

Same pattern as Email Input with type="url" and a default link icon.
Default placeholder: https://.

URL Input

Installing

Usage

Examples

API Reference

On this page