Foundations
IntroductionInput
A highly custom text input component featuring native-feeling iOS clear-text triggers, focus ring shadows, and specular boundary glares.
bunx shadcn-svelte@latest add https://ui.grgurevic.click/r/input.jsonBasic Input
A simple text input with custom placeholder.
Interactive Features
Clearable actions and disabled fields.
Clearable Field
Disabled Field
Best practices
The best practices when using input fields.
- Keep placeholders concise and contextually relevant.
- For search fields or inputs that need an icon or action button, wrap them in an
Input Group instead of using a plain Input. - Associate labels with inputs to ensure screen readers can read them properly.
- Disable input fields during submission states to prevent duplicate payloads.
Props
The props available for the Input component.
| 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. |
| liquidGlass | boolean | false | Enables physical liquid glass refraction (Chromium only). |
| refractiveIndex | number | 1.5 | IOR of glass curvature. Range 1.0 (air) to 2.4. |
| bezelWidth | number | 20 | Depth of bezel refraction zone (px). |
| displacementScale | number | 30 | Intensity of physical refraction offset. |
| surfaceProfile | "circle" | "squircle" | "concave" | "lip" | "squircle" | 3D bezel curvature outline profile. |