Skip to content
Get Pro
Forms

Trace Input

A text field whose border is traced round it from the point you clicked (left-centre from the keyboard), joining on the far side.

$149 once · every Pro piece

Customize

On error the line breaks above the hint. The demo validates an email address on blur.

Install

npx shadcn@latest add @obsyde/trace-input

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { TraceInput } from '@/components/obsyde/ember/trace-input/TraceInput';

export function Example() {
  return (
    <TraceInput label="Email" placeholder="you@example.com" />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/trace-input/TraceInput.tsxcomponent
  • ember/trace-input/trace-input.cssstyles
  • ember/trace-input/TraceInputDemo.tsxdemo
  • ember/shared/accent.tsshared
  • ember/shared/spring.tsshared
  • ember/shared/ember.cssshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
labelLabelstring'Email'
placeholderPlaceholderstring'you@example.com'
defaultValuePrefilled valuestring—
prefixPrefixstring—
disabledDisabledbooleanfalse