mocanvasv4.11.2

TLUiInputProps

interface TLUiInputProps

The text field the chrome uses: a page name, a link, a numeric style value.

Uncontrolled in the React sense — it keeps its own draft and reports it — because the values it edits are committed to the document, and committing every keystroke would fill the undo stack with one entry per letter. The three callbacks are the seam for that: onValueChange while typing, onComplete on Enter or blur, onCancel on Escape.

On this page

autoFocus autoSelect className defaultValue disabled icon id label onBlur onCancel onComplete onFocus onValueChange placeholder ref style value

Properties · 17

autoFocus?: boolean

autoSelect?: boolean

Select the whole value when it takes focus.

className?: string

defaultValue?: string

disabled?: boolean

icon?: string

id?: string

label?: string

onBlur?(): void

onCancel?(value: string): void

Escape: put the original value back.

onComplete?(value: string): void

Enter, or losing focus: the value is final.

onFocus?(): void

onValueChange?(value: string): void

placeholder?: string

ref?: Ref<HTMLInputElement>

style?: CSSProperties

value?: string

The value to start from. Changing it replaces the draft.

All of @mocanvas/mocanvas Guides Demos

mocanvas

Docs Licensing mocanvas@symbio.agency

mocanvas is built by Symbio. Free for non-commercial, non-profit and development use; commercial use needs an agreement. Not affiliated with or endorsed by tldraw.