# V input 25

> Input with inline clear button

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/v-input-25).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/v-input-25
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/v-input-25-light-b03f5438ac515f1c.png
- Registry item: https://ui.cnippet.dev/r/v-input-25.json
- Categories: input
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/v-input-25.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@cnippet/input`

## Files

### `registry/default/variants/v-input-25.tsx`

```tsx
"use client";

import { XIcon } from "lucide-react";
import { useState } from "react";
import { Field, FieldLabel } from "@/registry/default/ui/field";
import { Input } from "@/registry/default/ui/input";

export function Pattern() {
  const [value, setValue] = useState("Alex Rivera");

  return (
    <Field className="w-full max-w-xs">
      <FieldLabel htmlFor="input-clearable">Full name</FieldLabel>
      <div className="relative">
        <Input
          className={value ? "pe-9" : ""}
          id="input-clearable"
          onChange={(e) => setValue(e.target.value)}
          placeholder="Enter your full name"
          type="text"
          value={value}
        />
        {value && (
          <button
            aria-label="Clear input"
            className="absolute inset-e-0 inset-y-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-colors hover:text-foreground focus-visible:ring-2"
            onClick={() => setValue("")}
            type="button"
          >
            <XIcon aria-hidden="true" className="size-4" />
          </button>
        )}
      </div>
    </Field>
  );
}
```