Curved input
A single-line field whose underline curve follows the caret, with a visible label, hint, and error state.
Curved field
The rule under the field leans toward the caret. Type into it, or move the caret with the arrow keys, and watch the curve follow.
The name the team sees in the sidebar.
Saved as a draft until someone approves it.
That channel closed with the 0.2 release.
Nothing sent yet.
Implementation
1"use client";2 3import {4 useCallback,5 useEffect,6 useId,7 useRef,8 useState,9 type InputHTMLAttributes,10 type KeyboardEvent as ReactKeyboardEvent,11} from "react";12 13export type CurvedInputProps = Omit<14 InputHTMLAttributes<HTMLInputElement>,15 "value" | "onChange" | "size"16> & {17 /** Visible label for the field. */18 label: string;19 /** Supporting copy shown under the field. */20 hint?: string;21 /** Error copy. When present the field is marked invalid. */22 error?: string;23 /** Controlled value. */24 value?: string;25 /** Initial value when the component is uncontrolled. */26 defaultValue?: string;27 /** Called with the field value on every edit. */28 onValueChange?: (value: string) => void;