sheengemologic ui
All components

EditableTextField

Edits uncontrolled local text while committed form state stays app-owned and refresh-safe.@gemologic/sheen · forms

Playground

This example has no scalar controls. Its validated source remains interactive below.
North star
<EditableTextField value={name()} label="Project name" onCommit={value => { setName(value); }} />

Variant matrix

Project name
North star

Anatomy

Package
@gemologic/sheen
Source
packages/ui/src/primitives/EditableTextField.tsx
Tokens
  • --sheen-color-border-control
  • --sheen-color-focus-ring
  • --sheen-color-danger-border
  • --sheen-color-warning-border

Accessibility

Role: button at rest and textbox while editingKeyboard: Enter edits or commits, Escape reverts, Tab or blur commits

Do

  • Read committed form state from the app, not the temporary input.

Do not

  • Do not replace a dirty draft when refreshed committed data changes.

Generated props

NameTypeDefaultDescription
value *string—Committed app value shown at rest.
label *string—Accessible action and input name.
onCommit *(value: string, signal: AbortSignal) => void | Promise<void>—Commits a valid draft with cancellation.
validate(value: string) => string | undefined—Returns a synchronous validation message.
onCommitError(error: unknown) => void—Reports transport failure while the draft stays editable.
emptyLabelstring—Resting text when the committed value is empty.
disabledbooleanfalsePrevents entry into edit mode.
Native Solid/HTML attributes remain available and are omitted from this authored-prop view.