The editable input is a container displaying text that is user-editable.
Example
⌘ Cmd + ⌥ Option + 1
Properties
| property | propType | required | default | description |
|---|---|---|---|---|
| displayError | bool | - | false | Toggle error state styles |
| isEditing | bool | - | false | Determines if the component is in edit mode |
| label | string | - | '' | Text that describes the input |
| onBlur | func | - | noop | Function that fires when the input goes out of focus |
| onChange | func | - | noop | Function that fires when the input loses focus after the value changes |
| onFocus | func | - | noop | Function that fires when the input is focused |
| placeholder | string | - | '' | Placeholder for input |
| value | string | number | - | '' | Text within the input |
| note | string | - | - | Append note near form input. |
| testSection | string | - | - | Used for data-test-section attribute on the link |
| type | oneOf 'text' | 'password' | 'date' | 'number' | 'percent' | 'email' | 'url' | 'search' | 'tel' | yes | - | Supported input types |
Usage
Use this input to provide inline-editing for one or a few pieces of short user-submitted content.
Best Practices
Do
Do allow inline editing for short user-submitted values
Prefer inline editing to a single form field dialog
Don't
Don't include too many editable fields on one page, consider a sheet instead