# `CKEditor5.Components.Editable`
[🔗](https://github.com/Mati365/ckeditor5-phoenix/blob/v1.28.2/lib/components/editable.ex#L1)

Live View component for rendering an editable area in CKEditor 5.
It may be used with decoupled editors or multiroot editors.

# `render`

## Attributes

* `id` (`:string`) - The ID of the component. If not provided, it will be generated from the
  `editor_id` and `name` attributes.

* `class` (`:string`) - Additional CSS classes to apply to the editable container. Defaults to `""`.
* `style` (`:string`) - Custom CSS styles to apply to the editable container. Defaults to `nil`.
* `root` (`:string`) - The name of the root that is associated with this editable area. Editor may contain multiple
  roots which correspond to separate documents (or sections) of the editor. This name will be used
  as a key to identify the editable area in the editor's data.

  Defaults to `"main"`.
* `editor_id` (`:string`) - The ID of the editor instance this editable belongs to. If not provided,
  the first editor in the page will be used.

  Defaults to `nil`.
* `root_attrs` (`:map`) - A map of HTML attributes to apply to the editor root element for this editable. Defaults to `%{}`.
* `root_model_element` (`:string`) - This is the name of the root element. Setting it to '$inlineRoot' enables you to
  use the editor in paragraph-like editing mode.

  Defaults to `nil`.
* `name` (`:string`) - The name of the input field that will be used to submit the content.
  If not provided, it will be derived from the `:field` attribute when available.
  This is useful for form integration, allowing the content to be submitted as part of a form.

  Defaults to `nil`.
* `field` (`Phoenix.HTML.FormField`) - The `Phoenix.HTML.FormField` for form integration. Defaults to `nil`.
* `value` (`:string`) - The initial value for the content. This will be set when the component is initialized.
  If not specified, it will default to an empty string.

  Defaults to `""`.
* `required` (`:boolean`) - Marks the input as required. This will be used to validate the content when the form is submitted. Defaults to `false`.
* Global attributes are accepted.

---

*Consult [api-reference.md](api-reference.md) for complete listing*