Toggle Sidebar B
AppearanceLight & dark mode D

Curved Input

Arc-bent input bar with text, caret and submit button all following the curve.

Default

Click the bar and type. The text, caret and button all follow the arc. Every prop is wired to the controls underneath.

Light previewReplay previewOpen in new tab

Customize

Theme
Background
Text
Border
Button
Button Text
Shadow
Width450px
Bend28px
Height64px
Corner Radius18px
Border Width1.5px
Font Size16px

API Reference

CurvedInput

PropTypeDefaultDescription
modelValuestringundefinedControlled value (v-model); leave undefined for uncontrolled usage.
defaultValuestring""Initial value when the input is uncontrolled.
placeholderstring"Enter your email"Placeholder text rendered along the curve when empty.
buttonTextstring"Get Started"Label of the curved submit button.
typestring"email"Semantic input type; email/number map to the matching mobile keyboard.
namestringundefinedName attribute forwarded to the underlying input.
ariaLabelstringundefinedAccessible label; falls back to the placeholder.
theme"dark" | "light""dark"Color preset; any explicit color prop overrides its theme value.
widthnumber | string450Width of the input bar (pixels or any CSS width value, e.g. "100%").
bendnumber28How many pixels the center of the bar arches above its ends; negative bends downward, 0 is flat.
heightnumber64Thickness of the input bar in pixels.
cornerRadiusnumber18Corner rounding of the bar; the button rounds proportionally.
borderWidthnumber1.5Outline stroke width in pixels.
fontSizenumber16Font size of the curved text and button label.
backgroundColorstringundefinedFill color of the input bar; overrides the theme.
textColorstringundefinedColor of the typed text and caret; overrides the theme.
placeholderColorstringundefinedColor of the placeholder text; overrides the theme.
borderColorstringundefinedColor of the outline stroke; overrides the theme.
buttonColorstringundefinedFill of the submit button, the focus ring and the default icon chip; overrides the theme.
buttonTextColorstringundefinedColor of the button label; overrides the theme.
iconColorstringundefinedFill of the icon chip; defaults to the button color.
shadowSize"none" | "sm" | "md" | "lg""md"Size of the soft drop shadow under the bar.
shadowColorstringundefinedTint of the drop shadow; overrides the theme.
showButtonbooleantrueRender the curved submit button.
showIconbooleantrueRender the leading icon chip.

CurvedInput events and slots

PropTypeDefaultDescription
update:modelValue(value: string) => void-Emitted with the new value on every keystroke.
submit(value: string) => void-Emitted when the button is pressed or Enter is hit.
iconslot-Custom SVG content for the icon, centered at the origin; replaces the default envelope chip.

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut Description
EnterSubmits the value.
Tab + Enter + SpaceMoves focus to the curved button and presses it.
  • A hidden native input receives the typing, so autofill, IME and mobile keyboards keep working. It carries the aria-label.
  • The curved text is drawn in SVG and hidden from screen readers; the native input is the source of truth.
CounterCustom Field