Curved Input
A text field bent along an arc: the bar, the text, the caret and the send button all follow the curve. A real input sits underneath.
import { CurvedInput } from "pleate/effects/curved-input";Message
- Type and press Enter.
Bent down
Props
- label
Accessible name of the field (required).
string- onSubmit
Enter or the button.
(value) => void- placeholder
Hint text on the curve.
stringdefault "Type something"- width
Bar width in px; shrinks to fit.
numberdefault 520- curve
Rise of the middle in px; negative bends down.
numberdefault 60- thickness
Bar thickness in px.
numberdefault 56- submitLabel
Button name.
stringdefault "Send"
Accessibility
- A real input handles typing, selection, paste and autofill; the drawing is hidden.
- The send button is a labelled submit button.