ComponentsEditable
Editable
Editable is an input field used for editing a single line of text. It renders as static text and transforms into a text input field when then edit interaction is triggered (click, focus, or double-click).
Editable is an input field used for editing a single line of text. It renders as static text and transforms into a text input field when then edit interaction is triggered (click, focus, or double-click).
API reference docs for the component. Learn about the props, CSS, and other APIs of this exported module.
ActivationMode
The activation mode for the preview element. - "focus" - Enter edit mode when the preview element is focused - "dblclick" - Enter edit mode when the preview element is double-clicked - "none" - No interaction with the preview element will trigger edit mode.
boolean
Whether the editable should auto-resize to fit the content.
string
'ltr' | 'rtl'
The document's text/writing direction.
boolean
Whether the editable is disabled
() => HTMLElement | null
The element that should receive focus when the editable is closed. By default, it will focus on the trigger element.
string
The associate form of the underlying input.
() => ShadowRoot | Node | Document
A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
string
The unique identifier of the machine.
Partial<{ root: string area: string label: string preview: string input: string controls: string submitTrigger: string cancelTrigger: string editTrigger: string }>
The ids of the elements in the editable. Useful for composition.
boolean
Whether the input's value is invalid.
number
The maximum number of characters allowed in the editable
string
The name attribute of the editable component. Used for form submission.
() => void
The callback that is called when in the edit mode.
(event: FocusOutsideEvent) => void
Function called when the focus is moved outside the combobox
(event: InteractOutsideEvent) => void
Function called when an interaction happens outside the combobox
(event: PointerDownOutsideEvent) => void
Function called when the pointer is pressed down outside the combobox
(details: ValueChangeDetails) => void
The callback that is called when the editable's value is changed
(details: ValueChangeDetails) => void
The callback that is called when the editable's value is submitted.
(details: ValueChangeDetails) => void
The callback that is called when the esc key is pressed or the cancel button is clicked
string | { edit: string; preview: string }
The placeholder value to show when the `value` is empty
boolean
Whether the editable is readonly
boolean
Whether to select the text in the input when it is focused.
boolean
Whether to start with the edit mode active.
SubmitMode
The action that triggers submit in the edit mode: - "enter" - Trigger submit when the enter key is pressed - "blur" - Trigger submit when the editable is blurred - "none" - No action will trigger submit. You need to use the submit button - "both" - Pressing `Enter` and blurring the input will trigger submit
IntlTranslations
Specifies the localized strings that identifies the accessibility elements and their states
string
The value of the editable in both edit and preview mode
Dict<any>
() => void
Function to exit edit mode, and discard any changes
Dict<any>
() => void
Function to clear the value of the editable
Dict<any>
() => void
Function to enter edit mode
Dict<any>
Dict<any>
boolean
Whether the editable is in edit mode
boolean
Whether the editable value is empty
Dict<any>
Dict<any>
Dict<any>
(value: string) => void
Function to set the value of the editable
() => void
Function to exit edit mode, and submit any changes
Dict<any>
string
The current value of the editable