MarkedInputProps

Defined in: react/markput/src/components/MarkedInput.tsx:28

Props for MarkedInput component.

Example

<MarkedInput<ChipProps>
  Mark={Chip}
  options={[{
    markup: '@[__value__]',
    mark: { label: 'Click me' }
  }]}
/>

Type Parameters

Type Parameter	Default type	Description
TMarkProps	MarkProps	Type of props for the global Mark component
TOverlayProps extends CoreOption["overlay"]	OverlayProps	Type of props for the global Overlay component

Properties

className?

optional className: string;

Defined in: react/markput/src/components/MarkedInput.tsx:44

Additional classes

---

defaultValue?

optional defaultValue: string;

Defined in: react/markput/src/components/MarkedInput.tsx:65

Initial value for uncontrolled mode

---

draggable?

optional draggable: boolean | DraggableConfig;

Defined in: react/markput/src/components/MarkedInput.tsx:77

Enable drag interaction on block rows. Only effective when layout=‘block’.

Default

false

---

layout?

optional layout: "block" | "inline";

Defined in: react/markput/src/components/MarkedInput.tsx:73

Layout mode: ‘inline’ renders tokens in a single flow, ‘block’ stacks each token as its own row.

Default

'inline'

---

Mark?

optional Mark: ComponentType<TMarkProps>;

Defined in: react/markput/src/components/MarkedInput.tsx:34

Global component used for rendering markups (fallback for option.Mark)

---

onChange()?

optional onChange: (value) => void;

Defined in: react/markput/src/components/MarkedInput.tsx:67

Change event handler

Parameters

Parameter	Type
value	string

Returns

void

---

options?

optional options: Option<TMarkProps, TOverlayProps>[];

Defined in: react/markput/src/components/MarkedInput.tsx:42

Configuration options for markups and overlays. Each option can specify its own component via option.Mark or option.Overlay. Falls back to global Mark/Overlay components when not specified.

---

Overlay?

optional Overlay: ComponentType<TOverlayProps>;

Defined in: react/markput/src/components/MarkedInput.tsx:36

Global component used for rendering overlays (fallback for option.Overlay)

---

readOnly?

optional readOnly: boolean;

Defined in: react/markput/src/components/MarkedInput.tsx:69

Read-only mode

---

ref?

optional ref: Ref<MarkputHandler>;

Defined in: react/markput/src/components/MarkedInput.tsx:30

Ref to handler

---

showOverlayOn?

optional showOverlayOn: OverlayTrigger;

Defined in: react/markput/src/components/MarkedInput.tsx:61

Events that trigger overlay display

Default

'change'

---

slotProps?

optional slotProps: SlotProps;

Defined in: react/markput/src/components/MarkedInput.tsx:56

Props to pass to slot components

Example

slotProps={{ container: { onKeyDown: handler }, span: { className: 'custom' } }}

---

slots?

optional slots: Slots;

Defined in: react/markput/src/components/MarkedInput.tsx:51

Override internal components using slots

Example

slots={{ container: 'div', span: 'span' }}

---

Span?

optional Span: ComponentType<MarkProps>;

Defined in: react/markput/src/components/MarkedInput.tsx:32

Global component used for rendering text tokens (default: built-in Span)

---

style?

optional style: CSSProperties;

Defined in: react/markput/src/components/MarkedInput.tsx:46

Additional style

---

value?

optional value: string;

Defined in: react/markput/src/components/MarkedInput.tsx:63

Annotated text with markups