Input

A highly custom text input component featuring native-feeling iOS clear-text triggers, smooth focus ring shadows, specular glares, and elastic click ripple wiggles.

Preview

Value: ""

Configuration

Automatic Clear Button Appends trailing 'X' when text is present

Specular Boundary Glare Simulates metallic screen boundary lights

Elastic Cursor Magnet Slightly attracts field layout to cursor

Pointer Press Ripple Spawns light waves on surface click actions

Installation

npx shadcn-svelte@latest add https://ui.grgurevic.click/r/input.json

Svelte Composition Code

<script lang="ts">
	let value = $state("");
	import { Input } from "$lib/components/ui/input";
</script>

<Input placeholder="Enter username..." bind:value={value} />

API & Props Reference

Prop	Type	Default	Description
value	string \| number	""	Two-way bindable active value representing the textual input.
clearButton	boolean	false	Appends a dynamic trailing clear button matching native iOS input behavior.
specular	boolean	true	Projects dynamic light border reflection overlay on mouse hover events.
magnetic	boolean	true	Slightly attracts field container towards cursor position during drag motions.
ripple	boolean	true	Enables high-fidelity ambient click ripples.