Editable

An inline text component that switches between display and edit modes for in-place editing.

Anatomy 

<script>
  import {
    Editable,
    EditableArea,
    EditablePreview,
    EditableInput,
    EditableTextarea,
    EditableControl,
    EditableEditTrigger,
    EditableSubmitTrigger,
    EditableCancelTrigger,
    EditableLabel,
  } from "@saas-ui/svelte/components/editable";
</script>

<Editable.Root defaultValue="Click to edit">
  <Editable.Label>Name</Editable.Label>
  <Editable.Area>
    <Editable.Input />
    <Editable.Preview />
  </Editable.Area>
  <Editable.Control>
    <Editable.EditTrigger>Edit</Editable.EditTrigger>
    <Editable.CancelTrigger>Cancel</Editable.CancelTrigger>
    <Editable.SubmitTrigger>Save</Editable.SubmitTrigger>
  </Editable.Control>
</Editable.Root>

Examples

Basic Accessibility

Basic editable text with default styling.

Colours Accessibility

Use the colour prop to change the colour scheme.

Controlled Accessibility

Controlled editable component with external state management.

Disabled Accessibility

Use the disabled prop to disable the editable component.

Invalid Accessibility

Use the invalid prop to show an invalid state.

Textarea Accessibility

Use Editable.Textarea for multi-line editing.

With Controls Accessibility

Add edit, cancel, and submit controls with Editable.Control.

With Double Click Accessibility

Use activationMode="dblclick" to require a double-click to enter edit mode.

Props

Editable.Root

The root container component for the editable.

Prop Type Default Description
children Snippet - The content to render inside the editable.
activationMode "focus" | "dblclick" | "click" | "none" "focus" The activation mode for entering edit mode.
autoResize boolean false Whether to auto-resize the input to fit content.
defaultValue string - The initial value when uncontrolled.
value string - The controlled value.
onValueChange (details: { value: string }) => void - Called when the value changes.
onValueCommit (details: { value: string }) => void - Called when the value is committed (submitted).
onValueRevert (details: { value: string }) => void - Called when the value is reverted (cancelled).
onEditChange (details: { edit: boolean }) => void - Called when edit mode changes.
placeholder string | { edit: string; preview: string } - Placeholder text when empty.
maxLength number - Maximum number of characters allowed.
selectOnFocus boolean true Whether to select text on focus.
submitMode "enter" | "blur" | "none" | "both" "both" How to submit the value.
disabled boolean false Whether the editable is disabled.
readOnly boolean false Whether the editable is read-only.
required boolean false Whether the editable is required.
invalid boolean false Whether the editable is invalid.
size "xs" | "sm" | "md" | "lg" "md" The size of the editable.
colour ColourName "gray" The colour theme for focus states.
class string - Additional CSS classes.
style string - Additional inline styles.
name string - The name attribute for form submission.
form string - The form ID for form association.

Editable.Area

Container for the preview and input elements.

Prop Type Default Description
children Snippet - The content to render inside the area.
class string - Additional CSS classes.

Editable.Preview

Displays the current value when not in edit mode.

Prop Type Default Description
class string - Additional CSS classes.

Editable.Input

Single-line text input for editing the value.

Prop Type Default Description
class string - Additional CSS classes.
style string - Additional inline styles.

Editable.Textarea

Multi-line text input for editing the value.

Prop Type Default Description
class string - Additional CSS classes.
style string - Additional inline styles.
rows number 2 Number of rows for the textarea.

Editable.Label

Label element for the editable input.

Prop Type Default Description
children Snippet - The label content.
class string - Additional CSS classes.

Editable.Control

Container for edit, cancel, and submit trigger buttons.

Prop Type Default Description
children Snippet - The content to render inside the control.
class string - Additional CSS classes.

Editable.EditTrigger

Button to enter edit mode.

Prop Type Default Description
children Snippet - The content to render inside the trigger.
class string - Additional CSS classes.
variant ButtonVariants['variant'] "ghost" Button variant.
size ButtonVariants['size'] "xs" Button size.
colour ColourName "gray" Button colour.
icon boolean false Whether this is an icon-only button.
style string - Additional inline styles.

Editable.CancelTrigger

Button to cancel editing and revert changes.

Prop Type Default Description
children Snippet - The content to render inside the trigger.
class string - Additional CSS classes.
variant ButtonVariants['variant'] "outline" Button variant.
size ButtonVariants['size'] "xs" Button size.
colour ColourName "gray" Button colour.
icon boolean false Whether this is an icon-only button.
style string - Additional inline styles.

Editable.SubmitTrigger

Button to submit and commit the edited value.

Prop Type Default Description
children Snippet - The content to render inside the trigger.
class string - Additional CSS classes.
variant ButtonVariants['variant'] "outline" Button variant.
size ButtonVariants['size'] "xs" Button size.
colour ColourName "gray" Button colour.
icon boolean false Whether this is an icon-only button.
style string - Additional inline styles.